REFERENCE-DISPUTED above-floor 100.00% · raw 100.00% max-page diff interactions-cartesian-page-margins-x-paged-media · physical-page-context-and-nested-feature-depths · REFERENCE DISPUTED · pages: 3 ref / 4 ironpress PageCount
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
not generated
Chrome ref ironpress not generated
full-page >1.0%/channel diff why: page-count mismatch: ironpress 4 vs oracle 3
Physical-page-context interaction for page-margins and paged-media: the paged-media representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
reference dispute: CSS Fragmentation 3 sections 3.1 and 4.3 require break-before:page on the nested in-flow block to force a class-A page break and move the ensuing content into the next page fragmentainer. Ironpress therefore emits four pages and slices the outer box across pages 2 and 3. Chromium 150 Foundation ignores that forced break, emits three pages, and overlaps the nested text with its preceding sibling on page 2. Its PDF remains a compatibility canary rather than a normative fragmentation oracle; the complete shared-pdftoppm page-count and raster evidence remains reported.
source · cases/interactions/interactions-cartesian-page-margins-x-paged-media.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>page-margins x paged-media interaction</title>
6 <style>
7 @page {
8 size: 192px 200px;
9 margin: 16px;
10 background: #ffd6d6;
11 }
12 @page :left { margin: 8px 32px 24px 8px; }
13 @page :right { margin: 16px 8px 8px 32px; }
14 @page :first { margin: 32px 8px 16px 24px; }
15
16 @font-face {
17 font-family: MatrixSans;
18 src: url('../../fonts/ParitySans.ttf') format('truetype');
19 font-style: normal;
20 font-weight: 400;
21 }
22 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
23 * { box-sizing: border-box; margin: 0; }
24 html, body { background: #ffffff; }
25 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
26 .stage {
27 display: inline-flex;
28 width: 156px;
29 min-height: 164px;
30 margin-right: 8px;
31 align-items: center;
32 justify-content: center;
33 background: #f7fafc;
34 border: 1px solid #cbd5e1;
35 font-size: 16px;
36 vertical-align: top;
37 }
38 .stage:last-child { margin-right: 0; }
39 .node {
40 width: 126px;
41 padding: 7px;
42 border: 2px solid #577590;
43 background-color: #e7f5ff;
44 color: #17324d;
45 }
46 .node.inner {
47 width: 58px;
48 height: 48px;
49 padding: 5px;
50 }
51 .node.outer { min-height: 96px; }
52 .own { height: 22px; white-space: nowrap; }
53 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
54 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
55 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
56 .f-images-replaced > .own > .asset { display: inline-block; }
57 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
58 .f-lists-counters > .own > .token { counter-increment: pair-item; }
59 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
60 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
61 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
62 @supports (display:grid) {
63 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
64 }
65 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
66
67 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
68 .stage { display: block; margin: 0; break-before: page; }
69 .stage > .node { min-height: 68px; margin: 47px auto 0; }
70 .stage > .node.outer { margin-top: 33px; }
71
72 /* The three compositions occupy first/right, left, and later-right pages.
73 Their asymmetric page areas expose side selection, cascade, content
74 origin, bottom capacity, and paint that crosses a page-area edge.
75 Horizontal body padding is a distinct root-flow gutter: each stage
76 deliberately shifts through it to the physical page-area start edge. */
77 body { padding-left: 8px; padding-right: 8px; }
78 .stage {
79 width: 152px;
80 height: 128px;
81 min-height: 128px;
82 margin-left: -8px;
83 border: 0;
84 background: #d8f3dc;
85 }
86 .node { width: 100%; }
87 .stage > .node,
88 .stage > .node.outer { margin: 0; }
89 .f-page-margins {}
90 .f-paged-media {break-before:page;break-inside:avoid;}
91 </style>
92 </head>
93 <body>
94 <div class="stage"><div class="node f-page-margins f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
95 <div class="stage"><div class="node outer f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-paged-media"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
96 <div class="stage"><div class="node outer f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-page-margins"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
97 </body>
98 </html>
REFERENCE-DISPUTED 2985 px · above-floor 0.80% · raw 0.80% max-page diff interactions-cartesian-effects-x-paged-media · same-element-and-bidirectional-nesting · REFERENCE DISPUTED · 4 pages ColorValue ΔE 33.3
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff why: page 2: fill recolour ΔRGB(-24,+36,+153) (ΔE 33.3)
Cartesian family interaction for effects and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
reference dispute: CSS Fragmentation 3 section 5.4 requires box-decoration-break:slice to render the unbroken box and then slice it, with no box-shadow drawn at a broken edge. WPT box-shadow-002 tests that rule directly, while box-shadow-005 reserves a shadow around every fragment for box-decoration-break:clone. Ironpress leaves the page 2/3 cut undecorated; Chromium paints the yellow inset-shadow band at both cut edges as if the fragments were cloned. Its PDF remains a compatibility canary, not a normative oracle, and the raw shared-pdftoppm evidence remains reported.
regions (3 total; showing 3 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 3 2985 17,36 → 148,200 2583 total 1.0% · largest 0.8% · max ΔE 33.3
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 19,198 → 137,200 0.8 ΔE 33.3 ΔRGB(-24,36,153) fill recolour ΔRGB(-24,+36,+153) (ΔE 33.3) AntialiasCoverage 17,36 → 139,36 0.1 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 141,200 → 148,200 0.006899 ΔRGB(-2,-41,-32) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-paged-media.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x paged-media interaction</title>
6 <style>
7 @page { size: 192px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 min-height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 padding: 7px;
35 border: 2px solid #577590;
36 background-color: #e7f5ff;
37 color: #17324d;
38 }
39 .node.inner {
40 width: 58px;
41 height: 48px;
42 padding: 5px;
43 }
44 .node.outer { min-height: 96px; }
45 .own { height: 22px; white-space: nowrap; }
46 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
47 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
48 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
49 .f-images-replaced > .own > .asset { display: inline-block; }
50 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
51 .f-lists-counters > .own > .token { counter-increment: pair-item; }
52 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
53 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
54 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
55 @supports (display:grid) {
56 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
57 }
58 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
59
60 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
61 .stage { display: block; margin: 0; break-before: page; }
62 .stage > .node { min-height: 68px; margin: 47px auto 0; }
63 .stage > .node.outer { margin-top: 33px; }
64 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
65 .f-paged-media {break-before:page;break-inside:avoid;}
66 </style>
67 </head>
68 <body>
69 <div class="stage"><div class="node f-effects f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
70 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-paged-media"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
71 <div class="stage"><div class="node outer f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
72 </body>
73 </html>
REFERENCE-DISPUTED 1913 px · above-floor 0.19% · raw 0.19% max-page diff interactions-cartesian-positioning-x-tables · same-element-and-bidirectional-nesting · REFERENCE DISPUTED ColorValue ΔE 69.2
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(-2,-2,-2) (ΔE 69.2)
Cartesian family interaction for positioning and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
reference dispute: CSS Tables 3 section 4.1 defines the containing block generated by a positioned table wrapper as the area around which table margins are applied, explicitly including the area where the table border is drawn. Ironpress positions the absolute Bb from that border edge. Both the locked Chromium 150.0.7871.114 Foundation PDF and a fresh Chromium 150.0.7871.128 Foundation PDF instead inset it by the authored 2px table border on both axes; the specification identifies this behavior as a Chromium bug and interoperability risk. The Chromium PDF remains a compatibility canary rather than a normative geometry oracle, and the raw shared-pdftoppm evidence remains reported.
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 1913 115,94 → 136,108 1066 total 0.2% · largest 0.1% · max ΔE 69.2
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 115,94 → 125,108 0.1 ΔE 69.2 ΔRGB(-1,-1,-1) fill recolour ΔRGB(-1,-1,-1) (ΔE 69.2) ColorValue 126,94 → 136,108 0.1 ΔE 69.2 ΔRGB(-4,-4,-4) fill recolour ΔRGB(-4,-4,-4) (ΔE 69.2)
source · cases/interactions/interactions-cartesian-positioning-x-tables.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>positioning x tables interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-positioning {position:relative;}
61 .f-tables {display:table;border-collapse:separate;border-spacing:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-positioning f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-tables"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-positioning"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.47% · raw 46.18% (173182 px) interactions-cartesian-backgrounds-gradients-x-paged-media · same-element-and-bidirectional-nesting · 4 pages PASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff why: page 2: fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (225 total; showing 64 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 225 173182 15,34 → 139,200 170216 total 56.9% · largest 55.9% · max ΔE 0.6
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 17,36 → 139,200 55.9 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 28,172 → 56,200 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 15,65 → 15,164 0.1 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline ColorValue 59,51 → 64,57 0.07 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 37,50 → 42,57 0.07 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 48,52 → 53,56 0.06 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 48,47 → 52,51 0.05 ΔE 0.4 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.4) ColorValue 27,48 → 31,53 0.04 ΔE 0.6 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.6) AntialiasCoverage 15,164 → 15,200 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 15,45 → 15,64 0.02 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline ColorValue 40,150 → 43,152 0.01 ΔE 0.4 ΔRGB(0,0,2) fill recolour ΔRGB(+0,+0,+2) (ΔE 0.4) ColorValue 80,146 → 82,148 0.01 ΔE 0.2 ΔRGB(1,0,0) fill recolour ΔRGB(+1,+0,+0) (ΔE 0.2) ColorValue 75,151 → 77,153 0.01 ΔE 0.2 ΔRGB(1,0,0) fill recolour ΔRGB(+1,+0,+0) (ΔE 0.2) ColorValue 64,162 → 66,164 0.01 ΔE 0.2 ΔRGB(1,0,0) fill recolour ΔRGB(+1,+0,+0) (ΔE 0.2) AntialiasCoverage 59,167 → 61,169 0.007228 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 136,91 → 137,92 0.003285 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 135,92 → 136,93 0.003285 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 132,95 → 133,96 0.003285 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 131,96 → 132,97 0.003285 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 129,97 → 130,98 0.003285 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 128,99 → 129,100 0.003285 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 127,100 → 128,101 0.003285 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 124,103 → 125,104 0.003285 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 123,104 → 124,105 0.003285 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 121,105 → 122,106 0.003285 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 120,107 → 121,108 0.003285 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 119,108 → 120,109 0.003285 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 41,49 → 42,50 0.002957 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 15,34 → 15,36 0.002300 ΔRGB(0,-1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 136,92 → 137,93 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 133,93 → 134,94 0.001971 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 135,93 → 136,94 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 133,95 → 134,96 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 132,96 → 133,97 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 131,98 → 132,98 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 130,99 → 130,100 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 128,100 → 129,101 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 125,101 → 126,102 0.001971 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 127,101 → 128,102 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 125,103 → 126,104 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 124,104 → 125,105 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 123,106 → 124,106 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 122,107 → 122,108 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 120,108 → 121,109 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 119,109 → 120,110 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 116,111 → 117,112 0.001971 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 117,111 → 118,112 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 115,112 → 116,113 0.001971 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 116,112 → 117,113 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 114,114 → 114,114 0.001971 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 115,114 → 116,114 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 112,115 → 113,116 0.001971 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 114,115 → 114,116 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 111,116 → 112,117 0.001971 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 112,116 → 113,117 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 111,117 → 112,118 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 108,119 → 109,120 0.001971 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 109,119 → 110,120 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 107,120 → 108,121 0.001971 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 108,120 → 109,121 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 106,122 → 106,122 0.001971 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 107,122 → 108,122 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 104,123 → 105,124 0.001971 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 106,123 → 106,124 0.001971 ΔE 0.2 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-paged-media.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x paged-media interaction</title>
6 <style>
7 @page { size: 192px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 min-height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 padding: 7px;
35 border: 2px solid #577590;
36 background-color: #e7f5ff;
37 color: #17324d;
38 }
39 .node.inner {
40 width: 58px;
41 height: 48px;
42 padding: 5px;
43 }
44 .node.outer { min-height: 96px; }
45 .own { height: 22px; white-space: nowrap; }
46 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
47 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
48 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
49 .f-images-replaced > .own > .asset { display: inline-block; }
50 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
51 .f-lists-counters > .own > .token { counter-increment: pair-item; }
52 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
53 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
54 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
55 @supports (display:grid) {
56 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
57 }
58 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
59
60 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
61 .stage { display: block; margin: 0; break-before: page; }
62 .stage > .node { min-height: 68px; margin: 47px auto 0; }
63 .stage > .node.outer { margin-top: 33px; }
64 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
65 .f-paged-media {break-before:page;break-inside:avoid;}
66 </style>
67 </head>
68 <body>
69 <div class="stage"><div class="node f-backgrounds-gradients f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
70 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-paged-media"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
71 <div class="stage"><div class="node outer f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
72 </body>
73 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 22.96% (233238 px) interactions-cartesian-backgrounds-gradients-x-backgrounds-gradients · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and backgrounds-gradients: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (4088 total; showing 64 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 4088 233238 17,36 → 467,128 5388 total 30.1% · largest 0.7% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 20,50 → 92,114 0.7 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 246,44 → 303,110 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 410,44 → 467,110 0.7 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 67,50 → 138,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 410,71 → 467,128 0.6 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 32,50 → 101,114 0.5 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 17,66 → 60,114 0.5 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 89,64 → 139,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 410,36 → 467,94 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 55,50 → 124,114 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 401,62 → 467,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,36 → 303,93 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 421,82 → 467,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 381,36 → 420,65 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 396,57 → 467,128 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 394,36 → 432,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 99,74 → 139,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 369,72 → 408,111 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 433,94 → 467,128 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 77,52 → 139,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 82,57 → 139,114 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 345,36 → 370,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 44,50 → 111,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 410,36 → 454,80 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 406,36 → 442,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 354,80 → 375,108 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 39,50 → 105,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 110,85 → 139,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 359,36 → 382,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 17,50 → 38,71 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 289,79 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 206,73 → 244,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 383,113 → 407,128 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 51,50 → 116,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 296,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 345,52 → 360,73 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 29,50 → 49,66 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 190,67 → 234,111 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 381,84 → 408,111 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 190,67 → 207,84 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 61,50 → 82,67 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 357,67 → 404,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 448,109 → 467,128 0.2 ΔE 0.2 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.2) ColorValue 376,67 → 395,82 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 410,36 → 460,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 354,67 → 398,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 217,84 → 244,111 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 410,42 → 467,100 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 200,67 → 244,111 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 364,67 → 408,111 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-backgrounds-gradients.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x backgrounds-gradients interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 </style>
62 </head>
63 <body>
64 <div class="stage"><div class="node f-backgrounds-gradients f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
65 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 </body>
68 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000267% · raw 20.33% (76249 px) interactions-cartesian-backgrounds-gradients-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages PASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff why: page 2: fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Physical-page-context interaction for page-margins and backgrounds-gradients: the backgrounds-gradients representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
regions (708 total; showing 64 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 708 76249 10,10 → 158,94 8609 total 20.3% · largest 2.3% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 67,10 → 158,94 2.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 10,10 → 50,50 1.6 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 96,32 → 158,94 1.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 75,10 → 143,78 1.0 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 108,44 → 158,94 1.0 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 81,17 → 158,94 0.9 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 86,22 → 158,94 0.9 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 65,10 → 104,39 0.9 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 52,10 → 91,39 0.8 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 121,57 → 158,94 0.7 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 75,10 → 128,63 0.7 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 75,10 → 115,50 0.7 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 75,10 → 134,69 0.4 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 75,10 → 150,85 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 78,14 → 158,94 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 137,73 → 158,94 0.4 ΔE 0.2 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.2) ColorValue 105,41 → 158,94 0.3 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 75,10 → 147,82 0.3 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 75,10 → 120,55 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 10,87 → 27,94 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) AntialiasCoverage 75,10 → 136,71 0.2 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 75,10 → 123,58 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 10,74 → 17,91 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 75,10 → 118,53 0.2 ΔE 0.2 ΔRGB(1,0,0) fill recolour ΔRGB(+1,+0,+0) (ΔE 0.2) ColorValue 10,10 → 20,20 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) AntialiasCoverage 94,30 → 158,94 0.2 ΔE 0.3 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline ColorValue 75,10 → 107,42 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 75,10 → 130,65 0.1 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 24,87 → 37,94 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 132,68 → 158,94 0.1 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 49,10 → 79,39 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 54,10 → 70,23 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 53,87 → 66,94 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) AntialiasCoverage 93,29 → 158,94 0.1 ΔE 0.2 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline ColorValue 58,10 → 75,27 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 117,53 → 158,94 0.1 ΔE 0.2 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 119,55 → 158,94 0.10 ΔE 0.3 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline ColorValue 38,27 → 50,39 0.10 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 39,87 → 51,94 0.09 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 135,71 → 158,94 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 47,10 → 61,24 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 43,10 → 55,20 0.08 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 63,10 → 93,39 0.07 ΔE 0.3 ΔRGB(1,0,0) fill recolour ΔRGB(+1,+0,+0) (ΔE 0.3) AntialiasCoverage 75,10 → 116,51 0.07 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline ColorValue 10,60 → 17,70 0.06 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 30,29 → 39,39 0.06 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 151,87 → 158,94 0.06 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 52,10 → 66,23 0.06 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 10,46 → 17,55 0.05 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 10,52 → 17,61 0.05 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 48,87 → 57,94 0.05 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 10,10 → 22,22 0.05 ΔE 0.3 ΔRGB(1,0,0) fill recolour ΔRGB(+1,+0,+0) (ΔE 0.3) ColorValue 44,31 → 53,39 0.05 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 24,32 → 33,39 0.05 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) AntialiasCoverage 58,10 → 77,29 0.05 ΔE 0.3 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 62,10 → 92,39 0.05 ΔE 0.4 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline ColorValue 10,66 → 17,75 0.05 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 131,67 → 158,94 0.04 ΔE 0.1 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline ColorValue 64,87 → 73,94 0.04 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 30,24 → 34,29 0.04 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 149,85 → 158,94 0.04 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 21,87 → 29,94 0.04 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 35,87 → 43,94 0.04 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 41,10 → 52,20 0.03 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-page-margins.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x page-margins interaction</title>
6 <style>
7 @page {
8 size: 192px 200px;
9 margin: 16px;
10 background: #ffd6d6;
11 }
12 @page :left { margin: 8px 32px 24px 8px; }
13 @page :right { margin: 16px 8px 8px 32px; }
14 @page :first { margin: 32px 8px 16px 24px; }
15
16 @font-face {
17 font-family: MatrixSans;
18 src: url('../../fonts/ParitySans.ttf') format('truetype');
19 font-style: normal;
20 font-weight: 400;
21 }
22 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
23 * { box-sizing: border-box; margin: 0; }
24 html, body { background: #ffffff; }
25 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
26 .stage {
27 display: inline-flex;
28 width: 156px;
29 min-height: 164px;
30 margin-right: 8px;
31 align-items: center;
32 justify-content: center;
33 background: #f7fafc;
34 border: 1px solid #cbd5e1;
35 font-size: 16px;
36 vertical-align: top;
37 }
38 .stage:last-child { margin-right: 0; }
39 .node {
40 width: 126px;
41 padding: 7px;
42 border: 2px solid #577590;
43 background-color: #e7f5ff;
44 color: #17324d;
45 }
46 .node.inner {
47 width: 58px;
48 height: 48px;
49 padding: 5px;
50 }
51 .node.outer { min-height: 96px; }
52 .own { height: 22px; white-space: nowrap; }
53 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
54 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
55 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
56 .f-images-replaced > .own > .asset { display: inline-block; }
57 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
58 .f-lists-counters > .own > .token { counter-increment: pair-item; }
59 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
60 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
61 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
62 @supports (display:grid) {
63 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
64 }
65 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
66
67 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
68 .stage { display: block; margin: 0; break-before: page; }
69 .stage > .node { min-height: 68px; margin: 47px auto 0; }
70 .stage > .node.outer { margin-top: 33px; }
71
72 /* The three compositions occupy first/right, left, and later-right pages.
73 Their asymmetric page areas expose side selection, cascade, content
74 origin, bottom capacity, and paint that crosses a page-area edge.
75 Horizontal body padding is a distinct root-flow gutter: each stage
76 deliberately shifts through it to the physical page-area start edge. */
77 body { padding-left: 8px; padding-right: 8px; }
78 .stage {
79 width: 152px;
80 height: 128px;
81 min-height: 128px;
82 margin-left: -8px;
83 border: 0;
84 background: #d8f3dc;
85 }
86 .node { width: 100%; }
87 .stage > .node,
88 .stage > .node.outer { margin: 0; }
89 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
90 .f-page-margins {}
91 </style>
92 </head>
93 <body>
94 <div class="stage"><div class="node f-backgrounds-gradients f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
95 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-page-margins"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
96 <div class="stage"><div class="node outer f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
97 </body>
98 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 15.62% (158603 px) interactions-cartesian-backgrounds-gradients-x-units-values · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3209 total; showing 64 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 3209 158603 8,36 → 399,128 5947 total 20.5% · largest 0.8% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 8,50 → 80,114 0.8 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 19,50 → 91,114 0.7 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 69,50 → 141,114 0.7 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,44 → 303,110 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 8,50 → 43,85 0.6 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 94,59 → 149,114 0.5 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 31,50 → 100,114 0.5 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 43,50 → 112,114 0.5 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 57,50 → 125,114 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,36 → 303,93 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 105,70 → 149,114 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 86,51 → 149,114 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 81,50 → 148,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 360,72 → 399,111 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 117,82 → 149,114 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 347,67 → 395,111 0.3 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 52,50 → 118,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 289,79 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 296,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 372,84 → 399,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 66,50 → 132,114 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 345,67 → 389,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 131,96 → 149,114 0.1 ΔE 0.2 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.2) ColorValue 355,67 → 399,111 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 345,85 → 366,108 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 28,50 → 93,114 0.1 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 40,50 → 105,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 55,50 → 120,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 79,50 → 144,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,113 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 8,71 → 39,103 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,39 → 303,97 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,54 → 303,112 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 103,68 → 149,114 0.1 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 369,81 → 399,111 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 39,50 → 103,114 0.1 ΔE 0.2 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 345,67 → 362,84 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 378,90 → 399,111 0.10 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 8,71 → 44,107 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 345,84 → 360,102 0.10 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 368,67 → 386,82 0.09 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 181,107 → 191,123 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 8,68 → 27,90 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,36 → 297,87 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 8,70 → 48,111 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 8,50 → 19,61 0.08 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 181,95 → 188,110 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-units-values.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x units-values interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-units-values {width:calc(100% - 9px);padding-left:5%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-units-values"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.27% · raw 15.23% (154634 px) interactions-cartesian-backgrounds-borders-x-backgrounds-gradients · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-borders and backgrounds-gradients: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (1818 total; showing 64 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 1818 154634 16,36 → 467,128 63854 total 20.0% · largest 8.2% · max ΔE 0.6
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 18,51 → 138,113 8.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 383,44 → 467,128 0.9 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 410,71 → 467,128 0.6 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 410,36 → 467,94 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 401,62 → 467,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 421,82 → 467,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 381,36 → 420,65 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 396,57 → 467,128 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 394,36 → 432,66 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 433,94 → 467,128 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 345,36 → 370,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 404,36 → 442,70 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 410,36 → 454,80 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 207,74 → 245,112 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 359,36 → 382,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 345,52 → 360,73 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 219,85 → 245,112 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 448,109 → 467,128 0.2 ΔE 0.2 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.2) ColorValue 410,36 → 460,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 201,68 → 245,112 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 191,68 → 235,112 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 394,55 → 467,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 410,42 → 467,100 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 345,112 → 364,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 345,106 → 357,123 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 371,113 → 391,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 199,68 → 244,112 0.1 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 410,36 → 461,87 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 191,87 → 211,108 0.10 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 419,80 → 467,128 0.10 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 191,68 → 208,84 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 224,91 → 245,112 0.09 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 345,94 → 352,111 0.09 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 358,113 → 377,128 0.09 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 345,36 → 356,47 0.09 ΔE 0.3 ΔRGB(1,0,0) fill recolour ΔRGB(+1,+0,+0) (ΔE 0.3) ColorValue 195,68 → 240,112 0.09 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 215,82 → 245,112 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 410,36 → 449,75 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 16,49 → 51,80 0.08 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0) ColorValue 213,80 → 245,112 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 409,36 → 447,73 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 403,36 → 434,66 0.07 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 229,96 → 245,112 0.07 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 409,36 → 445,72 0.07 ΔE 0.2 ΔRGB(1,0,0) fill recolour ΔRGB(+1,+0,+0) (ΔE 0.2) ColorValue 214,68 → 231,83 0.07 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 191,85 → 205,102 0.07 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 193,68 → 237,112 0.07 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 408,69 → 467,128 0.07 ΔE 0.3 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 410,40 → 467,97 0.07 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 235,101 → 245,112 0.07 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 345,56 → 365,77 0.06 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 191,68 → 202,79 0.06 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) AntialiasCoverage 410,36 → 456,82 0.06 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 387,36 → 401,50 0.06 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 444,105 → 467,128 0.05 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 131,49 → 140,86 0.05 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0) ColorValue 380,36 → 393,47 0.05 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 365,113 → 382,128 0.05 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) AntialiasCoverage 407,68 → 467,128 0.05 ΔE 0.2 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 206,73 → 245,112 0.05 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 213,68 → 225,77 0.05 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) AntialiasCoverage 410,38 → 467,95 0.05 ΔE 0.2 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 429,90 → 467,128 0.05 ΔE 0.2 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline ColorValue 371,36 → 387,51 0.04 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-backgrounds-gradients.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x backgrounds-gradients interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.23% · raw 14.78% (150159 px) interactions-cartesian-backgrounds-gradients-x-fonts-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: predominant shared-outline coverage ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and fonts-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2215 total; showing 64 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 2215 150159 17,36 → 408,128 12502 total 19.4% · largest 1.6% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 17,50 → 92,114 1.6 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 246,44 → 303,110 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 67,50 → 138,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 32,50 → 101,114 0.5 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 17,50 → 53,92 0.5 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 89,64 → 139,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 55,50 → 124,114 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 246,36 → 303,93 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 354,67 → 383,108 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 99,74 → 139,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 369,72 → 408,111 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 77,52 → 139,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 82,57 → 139,114 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 44,50 → 111,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 39,50 → 105,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 110,85 → 139,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 17,50 → 38,71 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 289,79 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 51,50 → 116,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 296,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 381,84 → 408,111 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 357,67 → 404,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 364,67 → 408,111 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 376,67 → 395,81 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,60 → 51,102 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 29,50 → 94,114 0.1 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 64,50 → 129,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,113 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 123,98 → 139,114 0.1 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 246,39 → 303,97 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,54 → 303,112 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,74 → 41,98 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 43,50 → 107,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 53,50 → 118,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 62,50 → 126,114 0.1 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 75,50 → 139,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 354,67 → 371,84 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 97,72 → 139,114 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 378,81 → 408,111 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,107 → 191,123 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 356,67 → 401,111 0.09 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 354,85 → 380,111 0.09 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,36 → 297,87 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,95 → 188,110 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 387,90 → 408,111 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 285,75 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 376,79 → 408,111 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-fonts-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x fonts-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.13% · raw 14.72% (149544 px) interactions-cartesian-backgrounds-gradients-x-inline-text · same-element-and-bidirectional-nestingPASS via CSS-scale observation: predominant shared-outline coverage ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and inline-text: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2189 total; showing 64 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 2189 149544 17,36 → 408,128 5758 total 19.3% · largest 0.7% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 17,50 → 82,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 20,50 → 92,114 0.7 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 246,44 → 303,110 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 67,50 → 138,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 17,50 → 65,106 0.5 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 32,50 → 101,114 0.5 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 89,64 → 139,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 55,50 → 124,114 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 246,36 → 303,93 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 99,74 → 139,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 369,72 → 408,111 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 77,52 → 139,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 82,57 → 139,114 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 44,50 → 111,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 354,80 → 374,108 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 39,50 → 105,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 110,85 → 139,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 17,50 → 38,71 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 289,79 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 51,50 → 116,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 296,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 29,50 → 49,68 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 381,84 → 408,111 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 375,67 → 395,83 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 357,67 → 404,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 17,64 → 31,82 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 364,67 → 408,111 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 29,50 → 94,114 0.1 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 64,50 → 129,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,113 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 123,98 → 139,114 0.1 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 246,39 → 303,97 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,54 → 303,112 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 43,50 → 107,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 53,50 → 118,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 62,50 → 126,114 0.1 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 75,50 → 139,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 354,67 → 371,84 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 97,72 → 139,114 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 378,81 → 408,111 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,107 → 191,123 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 356,67 → 401,111 0.09 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,36 → 297,87 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 354,87 → 378,111 0.08 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 181,95 → 188,110 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 387,90 → 408,111 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 285,75 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-inline-text.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x inline-text interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-inline-text {line-height:1.35;word-spacing:5px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 14.59% (148182 px) interactions-cartesian-backgrounds-gradients-x-selectors-cascade · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2202 total; showing 64 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 2202 148182 17,36 → 408,128 5387 total 19.1% · largest 0.7% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 20,50 → 92,114 0.7 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 246,44 → 303,110 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 67,50 → 138,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 32,50 → 101,114 0.5 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 17,66 → 60,114 0.5 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 89,64 → 139,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 55,50 → 124,114 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 246,36 → 303,93 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 99,74 → 139,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 369,72 → 408,111 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 82,56 → 139,114 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 77,52 → 139,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 44,50 → 111,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 354,80 → 375,108 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 39,50 → 105,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 110,85 → 139,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 17,50 → 38,71 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 289,79 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 51,50 → 116,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 296,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 29,50 → 49,66 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 381,84 → 408,111 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 61,50 → 82,67 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 357,67 → 404,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 376,67 → 395,82 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 354,67 → 398,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 364,67 → 408,111 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 29,50 → 94,114 0.1 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 64,50 → 129,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,62 → 30,82 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 181,113 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 123,98 → 139,114 0.1 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 246,39 → 303,97 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,54 → 303,112 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 43,50 → 107,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 53,50 → 118,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 62,50 → 126,114 0.1 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 75,50 → 139,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 354,67 → 371,84 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 97,72 → 139,114 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,71 → 48,102 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,72 → 51,106 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 378,81 → 408,111 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,107 → 191,123 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 356,67 → 401,111 0.09 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,36 → 297,87 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,75 → 40,98 0.08 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-selectors-cascade.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x selectors-cascade interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-selectors-cascade {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-selectors-cascade"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 14.58% (148087 px) interactions-cartesian-backgrounds-gradients-x-positioning · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2230 total; showing 64 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 2230 148087 17,36 → 408,128 5400 total 19.1% · largest 0.7% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 20,50 → 92,114 0.7 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 17,50 → 82,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,44 → 303,110 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 67,50 → 138,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 32,50 → 101,114 0.5 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 89,64 → 139,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 55,50 → 124,114 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 246,36 → 303,93 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 369,72 → 408,111 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 77,52 → 139,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 82,57 → 139,114 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 44,50 → 111,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 354,80 → 375,108 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 39,50 → 105,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 17,50 → 38,71 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 289,79 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 51,50 → 116,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 296,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 29,50 → 49,66 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 17,50 → 69,102 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 381,84 → 408,111 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 357,67 → 404,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 376,67 → 395,82 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 17,50 → 73,106 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 354,67 → 398,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 119,74 → 139,96 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 364,67 → 408,111 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 29,50 → 94,114 0.1 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 64,50 → 129,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,62 → 30,82 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 181,113 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 246,39 → 303,97 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,54 → 303,112 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 123,98 → 139,114 0.1 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 99,98 → 115,114 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 43,50 → 107,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 53,50 → 118,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 62,50 → 126,114 0.1 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 75,50 → 139,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 354,67 → 371,84 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 110,98 → 126,114 0.1 ΔE 0.4 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.4) ColorValue 378,81 → 408,111 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,107 → 191,123 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 356,67 → 401,111 0.09 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,36 → 297,87 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,75 → 40,98 0.08 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 128,85 → 139,98 0.08 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-positioning.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x positioning interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-positioning {position:relative;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-positioning"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.03% · raw 14.55% (147788 px) interactions-cartesian-backgrounds-gradients-x-lists-counters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and lists-counters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2238 total; showing 64 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 2238 147788 17,36 → 408,128 5340 total 19.1% · largest 0.7% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 246,44 → 303,110 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 67,50 → 138,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 20,50 → 92,114 0.7 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 17,61 → 67,114 0.5 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 242,36 → 296,86 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 89,64 → 139,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 55,50 → 124,114 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 246,36 → 303,93 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 32,68 → 79,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 99,74 → 139,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 369,72 → 408,111 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 77,52 → 139,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 82,57 → 139,114 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 354,80 → 375,108 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 110,85 → 139,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 17,50 → 38,71 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 29,50 → 49,69 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 51,50 → 116,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 44,70 → 89,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 381,84 → 408,111 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 357,67 → 404,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 376,67 → 395,82 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 39,71 → 84,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 354,67 → 398,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 17,61 → 28,82 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 364,67 → 408,111 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 64,50 → 129,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 64,50 → 82,64 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 181,113 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 123,98 → 139,114 0.1 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 246,39 → 303,97 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,54 → 303,112 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,68 → 47,98 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 53,50 → 118,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 62,50 → 126,114 0.1 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 75,50 → 139,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 354,67 → 371,84 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 17,70 → 48,102 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 97,72 → 139,114 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,70 → 52,106 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 83,50 → 101,66 0.10 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 378,81 → 408,111 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,107 → 191,123 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 356,67 → 401,111 0.09 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 29,71 → 73,114 0.09 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 246,36 → 297,87 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,95 → 188,110 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-lists-counters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x lists-counters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-lists-counters {counter-reset:pair-item;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000197% · raw 14.54% (147683 px) interactions-cartesian-backgrounds-gradients-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2253 total; showing 64 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 2253 147683 18,36 → 413,128 10609 total 19.1% · largest 1.4% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 18,52 → 98,112 1.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 88,71 → 143,118 0.9 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 67,57 → 143,116 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 247,44 → 303,109 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 20,48 → 55,79 0.5 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 32,54 → 107,112 0.5 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 43,55 → 118,113 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 355,68 → 408,109 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 56,56 → 129,114 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 229,36 → 268,67 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 249,36 → 303,91 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 368,74 → 412,110 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 217,36 → 255,66 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 52,56 → 124,114 0.3 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 82,64 → 144,116 0.3 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 77,60 → 144,116 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 39,55 → 111,113 0.3 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 240,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 383,87 → 411,112 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 363,69 → 412,109 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 62,57 → 135,115 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 356,79 → 378,105 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 110,92 → 141,119 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 357,65 → 378,84 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 250,36 → 289,75 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 250,36 → 296,82 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 220,115 → 241,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 248,41 → 303,98 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 380,68 → 399,82 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 181,112 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 30,54 → 100,112 0.1 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 123,105 → 140,120 0.1 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 247,54 → 303,111 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 76,58 → 144,116 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 249,39 → 303,94 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,106 → 193,123 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 181,92 → 190,110 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 207,114 → 225,128 0.10 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 181,55 → 201,77 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 18,72 → 54,102 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 19,71 → 51,99 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 20,69 → 42,89 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 379,84 → 411,111 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 19,74 → 44,95 0.08 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 249,36 → 283,68 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 250,36 → 297,84 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 194,113 → 212,128 0.07 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 206,36 → 223,51 0.07 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 251,36 → 285,70 0.07 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 37,50 → 59,68 0.07 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 50,56 → 119,114 0.07 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 22,47 → 33,57 0.07 ΔE 0.3 fill colour differs (ΔE 0.3) ColorValue 20,67 → 36,83 0.06 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 398,103 → 410,113 0.06 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000098% · raw 14.53% (147528 px) interactions-cartesian-backgrounds-gradients-x-flexbox · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and flexbox: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2416 total; showing 64 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 2416 147528 17,36 → 457,128 5347 total 19.1% · largest 0.7% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 17,50 → 82,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,44 → 303,110 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 67,50 → 138,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 20,50 → 92,114 0.7 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 89,64 → 139,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,36 → 303,93 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,50 → 49,82 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 99,74 → 139,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 77,52 → 139,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 82,57 → 139,114 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 431,78 → 457,104 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 110,85 → 139,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 17,50 → 38,71 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 32,83 → 65,114 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 65,50 → 101,84 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 419,66 → 457,104 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,36 → 289,79 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 55,79 → 90,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 296,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 17,50 → 65,98 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 403,60 → 447,104 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 403,60 → 420,77 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 17,50 → 69,102 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 92,50 → 124,78 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 406,60 → 453,104 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 17,50 → 73,106 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 413,60 → 457,104 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,113 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 403,78 → 423,100 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 123,98 → 139,114 0.1 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 246,39 → 303,97 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,54 → 303,112 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,50 → 58,91 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 404,60 → 450,104 0.1 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 39,84 → 70,114 0.1 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 75,50 → 139,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 44,89 → 72,114 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 17,50 → 53,86 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 97,72 → 139,114 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 76,50 → 105,79 0.10 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 84,50 → 111,75 0.10 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 181,107 → 191,123 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 246,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 403,77 → 418,94 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 426,60 → 443,75 0.08 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 246,36 → 297,87 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 427,74 → 457,104 0.08 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 51,85 → 81,114 0.08 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-flexbox.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x flexbox interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-flexbox {display:flex;align-items:center;justify-content:space-around;gap:4px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-flexbox"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000197% · raw 14.48% (147045 px) interactions-cartesian-backgrounds-gradients-x-grid · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and grid: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2404 total; showing 64 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 2404 147045 17,36 → 458,128 5340 total 19.0% · largest 0.7% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 246,44 → 303,110 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 67,50 → 138,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 32,50 → 101,114 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 89,64 → 139,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 55,50 → 124,114 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 246,36 → 303,93 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,50 → 49,82 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 20,77 → 57,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 99,74 → 139,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 17,77 → 46,114 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 59,50 → 92,78 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 77,52 → 139,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 82,57 → 139,114 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 50,50 → 82,78 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 44,50 → 111,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 39,50 → 105,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 110,85 → 139,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 17,50 → 38,71 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 289,79 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 420,66 → 458,104 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 51,50 → 116,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 296,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 404,60 → 448,104 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 404,60 → 421,77 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 431,77 → 458,104 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 414,60 → 458,104 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 64,50 → 129,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,113 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 408,60 → 454,104 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 404,78 → 424,100 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 123,98 → 139,114 0.1 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 246,39 → 303,97 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,54 → 303,112 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 33,50 → 65,82 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 436,82 → 458,104 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 412,60 → 457,104 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 43,50 → 107,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 53,50 → 118,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 62,50 → 126,114 0.1 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 75,50 → 139,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 97,72 → 139,114 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,50 → 53,86 0.10 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 181,107 → 191,123 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 40,50 → 69,77 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 404,77 → 419,94 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 427,60 → 444,75 0.08 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 246,36 → 297,87 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-grid.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x grid interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-grid {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-grid"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 14.48% (147028 px) interactions-cartesian-backgrounds-gradients-x-clip-mask · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and clip-mask: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2178 total; showing 64 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 2178 147028 17,36 → 409,128 22046 total 19.0% · largest 2.8% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 42,52 → 139,113 2.8 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 24,51 → 99,109 1.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 220,44 → 303,128 0.9 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 89,63 → 139,114 0.9 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 17,66 → 60,108 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 244,36 → 303,96 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 228,36 → 268,68 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 216,36 → 255,67 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 18,50 → 38,83 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 369,72 → 408,111 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 239,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 354,80 → 375,108 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 58,50 → 83,68 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 110,87 → 137,114 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 245,36 → 289,80 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 244,36 → 296,87 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 29,50 → 49,66 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 243,41 → 303,103 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 381,84 → 408,111 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 181,108 → 205,128 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 357,67 → 404,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 376,67 → 395,82 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 118,95 → 136,114 0.2 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 354,67 → 398,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 229,54 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 364,67 → 408,111 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,107 → 196,123 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 244,39 → 303,99 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 207,111 → 228,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 354,67 → 371,84 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 17,71 → 48,102 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,72 → 51,106 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 378,81 → 408,111 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,55 → 201,77 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 356,67 → 401,111 0.09 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 245,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 194,110 → 215,128 0.09 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 181,94 → 188,110 0.09 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,36 → 297,89 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,75 → 40,98 0.08 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 245,36 → 285,75 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 387,90 → 408,111 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 376,79 → 408,111 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) AntialiasCoverage 362,67 → 406,111 0.07 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 206,36 → 223,51 0.07 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 393,96 → 408,111 0.07 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 237,36 → 270,68 0.07 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 279,104 → 303,128 0.06 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 181,36 → 191,45 0.06 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 201,110 → 221,128 0.06 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 354,67 → 365,78 0.06 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) AntialiasCoverage 245,36 → 292,83 0.06 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 17,70 → 37,91 0.06 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 246,36 → 281,71 0.06 ΔE 0.2 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-clip-mask.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x clip-mask interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 14.43% (146570 px) interactions-cartesian-backgrounds-gradients-x-tables · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2362 total; showing 64 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 2362 146570 17,36 → 411,128 5340 total 18.9% · largest 0.7% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 246,44 → 303,110 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 67,50 → 138,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 32,50 → 101,114 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 89,64 → 139,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 20,68 → 66,114 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 17,68 → 55,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 55,50 → 124,114 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 246,36 → 303,93 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,50 → 49,82 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 99,74 → 139,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 77,52 → 139,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 82,57 → 139,114 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 44,50 → 111,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 373,76 → 411,114 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 39,50 → 105,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 110,85 → 139,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 17,50 → 38,71 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 68,50 → 92,69 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 246,36 → 289,79 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 58,50 → 82,68 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 51,50 → 116,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 296,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 385,88 → 411,114 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 367,70 → 411,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 357,70 → 401,114 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 64,50 → 129,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,113 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 123,98 → 139,114 0.1 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 246,39 → 303,97 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,54 → 303,112 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 365,70 → 410,114 0.1 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 43,50 → 107,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 53,50 → 118,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 62,50 → 126,114 0.1 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 75,50 → 139,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 97,72 → 139,114 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 357,89 → 377,109 0.10 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 357,70 → 373,86 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 390,93 → 411,114 0.09 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 181,107 → 191,123 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 361,70 → 406,114 0.09 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 246,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,36 → 297,87 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,76 → 43,102 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 381,84 → 411,114 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,95 → 188,110 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 17,75 → 38,98 0.08 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,36 → 285,75 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-tables.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x tables interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-tables {display:table;border-collapse:separate;border-spacing:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-tables"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 14.42% (146464 px) interactions-cartesian-backgrounds-gradients-x-generated-content · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and generated-content: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2421 total; showing 64 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 2421 146464 17,36 → 408,130 5340 total 18.9% · largest 0.7% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 246,44 → 303,110 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 67,50 → 138,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 89,64 → 139,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 55,50 → 124,114 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 246,36 → 303,93 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 52,50 → 92,88 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 41,50 → 82,89 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 17,50 → 49,82 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 99,74 → 139,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 77,52 → 139,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 82,57 → 139,114 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 44,50 → 111,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 63,50 → 101,85 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 20,88 → 52,114 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 17,88 → 42,114 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 110,85 → 139,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 39,50 → 105,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 17,50 → 38,71 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 289,79 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 370,92 → 408,130 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 51,50 → 116,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 296,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 32,88 → 60,114 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 354,86 → 398,130 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 354,86 → 371,103 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 381,103 → 408,130 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 364,86 → 408,130 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 64,50 → 129,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,113 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 358,86 → 404,130 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 31,50 → 65,84 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 354,104 → 374,126 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 32,50 → 69,86 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 123,98 → 139,114 0.1 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 246,39 → 303,97 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,54 → 303,112 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,50 → 58,91 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 386,108 → 408,130 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 362,86 → 407,130 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 43,50 → 107,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 53,50 → 118,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 62,50 → 126,114 0.1 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 75,50 → 139,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,50 → 53,86 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 97,72 → 139,114 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 39,50 → 73,82 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,107 → 191,123 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 246,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-generated-content.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x generated-content interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-generated-content {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-generated-content"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 14.41% (146396 px) interactions-cartesian-backgrounds-gradients-x-typography · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2182 total; showing 64 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 2182 146396 17,36 → 408,128 5340 total 18.9% · largest 0.7% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 246,44 → 303,110 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 67,50 → 138,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 32,50 → 101,114 0.5 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 20,71 → 68,114 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 89,64 → 139,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 17,73 → 59,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 55,50 → 124,114 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 246,36 → 303,93 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 99,74 → 139,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 369,72 → 408,111 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 77,52 → 139,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 82,57 → 139,114 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 44,50 → 111,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 354,78 → 373,108 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 39,50 → 105,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 110,85 → 139,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 17,50 → 38,71 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 289,79 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 70,50 → 92,70 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 51,50 → 116,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 296,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 381,84 → 408,111 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 29,50 → 49,66 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 357,67 → 404,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 64,50 → 82,64 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 364,67 → 408,111 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 376,67 → 395,79 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 64,50 → 129,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,113 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 123,98 → 139,114 0.1 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 246,39 → 303,97 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,54 → 303,112 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,61 → 28,82 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 43,50 → 107,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 53,50 → 118,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 62,50 → 126,114 0.1 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 75,50 → 139,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 354,67 → 371,84 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 97,72 → 139,114 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 378,81 → 408,111 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,70 → 50,106 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,107 → 191,123 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 246,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,74 → 41,98 0.08 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,36 → 297,87 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 29,74 → 70,114 0.08 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 181,95 → 188,110 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 387,90 → 408,111 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-typography.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x typography interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-typography {font-size:18px;font-weight:700;letter-spacing:.7px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-typography"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000197% · raw 14.39% (146111 px) interactions-cartesian-backgrounds-gradients-x-multicol · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and multicol: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2557 total; showing 64 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 2557 146111 17,36 → 466,128 5340 total 18.9% · largest 0.7% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 246,44 → 303,110 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 67,50 → 138,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 20,57 → 77,114 0.6 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 17,66 → 60,114 0.5 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 89,64 → 139,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,36 → 303,93 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 32,68 → 77,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 99,74 → 139,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 77,52 → 139,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 82,57 → 139,114 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 79,50 → 124,94 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 110,85 → 139,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 17,50 → 38,71 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 289,79 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 428,51 → 466,89 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 296,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 29,50 → 49,66 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 412,45 → 456,89 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 412,45 → 428,62 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 61,50 → 82,67 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 79,50 → 101,72 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 439,62 → 466,89 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 422,45 → 466,89 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 39,76 → 77,114 0.1 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 44,81 → 77,114 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 17,62 → 30,82 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 181,113 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 416,45 → 462,89 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 79,50 → 111,82 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 55,92 → 77,114 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 123,98 → 139,114 0.1 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 246,39 → 303,97 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,54 → 303,112 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 444,67 → 466,89 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 77,50 → 92,63 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 420,45 → 465,89 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 79,50 → 116,87 0.1 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 412,64 → 432,85 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 75,50 → 139,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 79,50 → 129,100 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 97,72 → 139,114 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,71 → 48,102 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 29,66 → 77,114 0.09 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 17,72 → 51,106 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 79,50 → 105,76 0.09 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 181,107 → 191,123 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 246,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,36 → 297,87 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-multicol.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x multicol interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.08% · raw 14.35% (145753 px) interactions-cartesian-backgrounds-gradients-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage ColorValue missing 0.07% extra 0.001495% ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2179 total; showing 64 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 2171 145503 17,36 → 408,128 13389 total 18.8% · largest 1.7% · max ΔE 1.9 Extra 1 5 395,62 → 395,64 5 total 0.000646% · largest 0.000646% Missing 7 245 25,63 → 382,93 136 total 0.03% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 17,50 → 101,114 1.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,44 → 303,110 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 67,50 → 138,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 354,67 → 408,111 0.6 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 89,64 → 139,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 55,50 → 124,114 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 246,36 → 303,93 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 99,74 → 139,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 369,72 → 408,111 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 77,52 → 139,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 82,57 → 139,114 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 60,50 → 92,76 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 44,50 → 111,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 39,50 → 105,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 110,85 → 139,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 17,50 → 38,71 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 289,79 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 51,50 → 116,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 296,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 29,50 → 49,66 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 381,84 → 408,111 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 61,50 → 82,66 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 376,67 → 395,82 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 64,50 → 129,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,113 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 123,98 → 139,114 0.1 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 246,39 → 303,97 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,54 → 303,112 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,62 → 27,82 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 43,50 → 107,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 53,50 → 118,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 62,50 → 126,114 0.1 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 75,50 → 139,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 354,67 → 371,84 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 97,72 → 139,114 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 378,81 → 408,111 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,107 → 191,123 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 246,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 379,67 → 404,90 0.08 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,36 → 297,87 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,95 → 188,110 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 387,90 → 408,111 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 285,75 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 376,79 → 408,111 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 194,113 → 212,128 0.07 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 206,36 → 223,51 0.07 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 393,96 → 408,111 0.07 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 279,104 → 303,128 0.06 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.10% · raw 14.26% (144802 px) interactions-cartesian-backgrounds-gradients-x-color-opacity · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and color-opacity: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3599 total; showing 64 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 3599 144802 17,36 → 408,128 7114 total 18.7% · largest 0.9% · max ΔE 0.7
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 220,44 → 303,128 0.9 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 181,36 → 255,110 0.8 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 67,50 → 138,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 21,50 → 92,114 0.6 ΔE 0.4 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.4) ColorValue 207,36 → 303,128 0.6 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 32,50 → 100,114 0.5 ΔE 0.4 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.4) ColorValue 190,36 → 268,110 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 89,64 → 139,114 0.4 ΔE 0.4 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.4) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 99,74 → 139,114 0.3 ΔE 0.4 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.4) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 77,52 → 139,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 56,50 → 124,114 0.3 ΔE 0.3 ΔRGB(1,0,0) fill recolour ΔRGB(+1,+0,+0) (ΔE 0.3) ColorValue 44,50 → 111,114 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 369,72 → 408,111 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 39,50 → 105,114 0.2 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 82,57 → 139,114 0.2 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 289,79 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 51,50 → 116,114 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,36 → 296,86 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 354,85 → 375,108 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 382,85 → 408,111 0.2 ΔE 0.4 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.4) ColorValue 181,67 → 245,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 29,50 → 49,66 0.2 ΔE 0.4 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.4) ColorValue 354,67 → 398,110 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 357,67 → 404,111 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 17,70 → 60,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,50 → 36,69 0.1 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 364,67 → 408,111 0.1 ΔE 0.3 ΔRGB(1,0,0) fill recolour ΔRGB(+1,+0,+0) (ΔE 0.3) ColorValue 244,39 → 303,99 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,54 → 303,112 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,105 → 193,123 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 17,63 → 30,82 0.1 ΔE 0.4 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.4) ColorValue 43,50 → 107,114 0.1 ΔE 0.4 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.4) AntialiasCoverage 62,50 → 126,114 0.1 ΔE 0.4 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 53,50 → 118,114 0.1 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 17,66 → 57,110 0.1 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 123,98 → 139,114 0.1 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 97,72 → 139,114 0.1 ΔE 0.4 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.4) ColorValue 17,71 → 48,102 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 354,67 → 371,84 0.10 ΔE 0.4 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.4) ColorValue 211,77 → 244,111 0.09 ΔE 0.5 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.5) ColorValue 356,67 → 400,111 0.09 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 246,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,55 → 201,77 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,36 → 297,87 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 244,36 → 285,76 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,75 → 40,98 0.08 ΔE 0.4 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.4) ColorValue 388,91 → 408,111 0.08 ΔE 0.4 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.4) ColorValue 376,79 → 408,111 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 194,113 → 212,128 0.07 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) AntialiasCoverage 362,67 → 406,111 0.07 ΔE 0.4 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 206,36 → 223,51 0.07 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 378,81 → 408,111 0.07 ΔE 0.3 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-color-opacity.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x color-opacity interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-color-opacity {color:#5a189a;opacity:.76;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.05% · raw 13.95% (141700 px) interactions-cartesian-backgrounds-gradients-x-effects · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and effects: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2136 total; showing 64 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 2136 141700 19,36 → 467,128 5099 total 18.3% · largest 0.7% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 246,44 → 303,110 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 22,52 → 91,112 0.7 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 68,52 → 136,112 0.6 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 19,66 → 60,112 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 34,52 → 99,112 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 91,66 → 137,112 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,36 → 303,93 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 58,52 → 122,112 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.3 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 369,72 → 408,111 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 101,76 → 137,112 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 79,54 → 137,112 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 84,59 → 137,112 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 354,80 → 375,108 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 46,52 → 108,112 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 41,52 → 103,112 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 289,79 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 112,87 → 137,112 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 19,52 → 36,69 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 53,52 → 114,112 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 381,84 → 408,111 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 357,67 → 404,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 376,67 → 395,82 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,36 → 296,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 354,67 → 398,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 29,52 → 47,66 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 61,52 → 80,67 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 364,67 → 408,111 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 66,52 → 127,112 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 31,52 → 92,112 0.1 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 181,113 → 200,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 246,39 → 303,97 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 354,67 → 371,84 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 19,62 → 30,80 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 253,54 → 303,105 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 64,52 → 124,112 0.10 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 55,52 → 116,112 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 44,52 → 105,112 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 77,52 → 137,112 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 378,81 → 408,111 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 19,71 → 48,100 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 99,74 → 137,112 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,107 → 191,123 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 356,67 → 401,111 0.09 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 19,72 → 51,104 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 246,36 → 297,87 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 125,100 → 137,112 0.08 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 181,95 → 188,110 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-effects.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x effects interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.02% · raw 13.85% (140624 px) interactions-cartesian-backgrounds-gradients-x-images-replaced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and images-replaced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2206 total; showing 64 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 2206 140624 17,36 → 408,128 5340 total 18.2% · largest 0.7% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 246,44 → 303,110 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 67,50 → 138,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 89,64 → 139,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 20,77 → 61,114 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 17,50 → 49,82 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 251,36 → 303,89 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 17,77 → 51,114 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 99,74 → 139,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 369,72 → 408,111 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 77,52 → 139,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 82,57 → 139,114 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 243,36 → 278,68 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 354,80 → 375,108 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 32,80 → 69,114 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 110,85 → 139,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 17,50 → 38,71 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 55,81 → 92,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 250,36 → 289,74 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 381,84 → 408,111 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 251,36 → 296,81 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 376,67 → 395,82 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 357,67 → 404,111 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 354,67 → 398,111 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 364,43 → 408,111 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 251,41 → 303,95 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 100,50 → 124,74 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 44,81 → 79,114 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 181,113 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 52,58 → 66,77 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 39,81 → 74,114 0.1 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 123,98 → 139,114 0.1 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 246,54 → 303,112 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 251,39 → 303,92 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 75,50 → 139,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 97,72 → 139,114 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 354,67 → 370,84 0.09 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 378,81 → 408,111 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 51,81 → 85,114 0.09 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 181,107 → 191,123 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 356,67 → 400,111 0.09 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 246,36 → 283,71 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 77,50 → 92,81 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 41,50 → 65,73 0.08 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 67,50 → 82,57 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 181,95 → 188,110 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 387,90 → 408,111 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 376,79 → 408,111 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 251,36 → 297,82 0.07 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 194,113 → 212,128 0.07 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 248,36 → 285,71 0.07 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-images-replaced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x images-replaced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-images-replaced {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.64% · raw 13.82% (140361 px) interactions-cartesian-backgrounds-gradients-x-filters · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and filters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (4338 total; showing 64 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 4338 140361 14,34 → 471,131 45219 total 18.1% · largest 5.8% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 17,50 → 139,114 5.8 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 181,36 → 279,123 1.8 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 354,67 → 408,111 1.6 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 248,39 → 303,108 0.9 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 232,54 → 303,128 0.5 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 14,48 → 143,117 0.4 ΔRGB(-1,-1,-1) fill recolour ΔRGB(-1,-1,-1) (ΔE 0) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 248,36 → 303,91 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 247,36 → 292,79 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 248,36 → 296,83 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 220,114 → 242,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 248,36 → 283,70 0.1 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,114 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 207,114 → 226,128 0.10 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) AntialiasCoverage 343,34 → 471,130 0.09 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 352,65 → 410,113 0.09 ΔRGB(-2,-2,-7) antialiasing coverage residue on a shared outline ColorValue 248,36 → 297,85 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 206,36 → 223,51 0.07 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 194,114 → 211,128 0.07 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 279,104 → 303,128 0.06 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 181,36 → 191,45 0.06 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 201,114 → 218,128 0.05 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 223,36 → 236,50 0.05 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 226,36 → 241,49 0.05 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 243,68 → 303,128 0.05 ΔE 0.2 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 265,90 → 303,128 0.05 ΔE 0.2 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 364,49 → 370,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline ColorValue 282,107 → 303,128 0.04 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 190,67 → 244,111 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline ColorValue 216,114 → 232,128 0.04 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 342,34 → 342,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 471,36 → 471,131 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 467,36 → 467,128 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 216,36 → 228,47 0.04 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 189,114 → 205,128 0.03 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 229,36 → 245,52 0.03 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 192,114 → 207,128 0.03 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 214,114 → 229,128 0.03 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 229,114 → 244,128 0.03 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 297,122 → 303,128 0.02 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 181,36 → 193,47 0.02 ΔE 0.3 ΔRGB(1,0,0) fill recolour ΔRGB(+1,+0,+0) (ΔE 0.3) AntialiasCoverage 188,114 → 202,128 0.02 ΔE 0.2 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline ColorValue 204,114 → 219,128 0.02 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,114 → 192,125 0.02 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 48,61 → 53,65 0.02 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 201,50 → 206,56 0.02 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 221,36 → 232,45 0.02 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 278,103 → 303,128 0.02 ΔE 0.1 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 387,50 → 392,58 0.02 antialiasing coverage residue on a shared outline ColorValue 372,81 → 378,85 0.02 ΔE 0.4 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.4) AntialiasCoverage 228,36 → 243,51 0.02 ΔE 0.3 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 199,114 → 214,128 0.02 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 362,76 → 366,83 0.02 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 294,119 → 303,128 0.02 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 211,75 → 216,84 0.02 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline ColorValue 191,49 → 195,53 0.01 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) AntialiasCoverage 17,69 → 28,80 0.01 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-filters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x filters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.04% · raw 13.24% (134432 px) interactions-cartesian-backgrounds-gradients-x-overflow-clipping · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and overflow-clipping: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (1849 total; showing 64 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 1849 134432 17,36 → 408,128 11080 total 17.4% · largest 1.4% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 68,55 → 138,109 1.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 90,60 → 139,109 1.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 26,55 → 97,109 1.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 220,44 → 303,128 0.9 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,69 → 303,128 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 55,55 → 118,109 0.6 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 354,86 → 408,109 0.6 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 44,55 → 106,109 0.6 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 18,66 → 57,109 0.5 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 17,55 → 51,89 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 257,82 → 303,128 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,57 → 303,128 0.4 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,36 → 303,93 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 237,62 → 303,128 0.4 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 241,36 → 278,69 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 289,79 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 17,55 → 36,75 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 246,36 → 296,85 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 59,55 → 78,69 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 354,86 → 371,103 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 246,41 → 303,100 0.2 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 229,54 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,76 → 41,100 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 254,79 → 303,128 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,113 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 246,39 → 303,97 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,107 → 192,123 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 181,55 → 201,77 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 66,55 → 120,109 0.10 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 246,36 → 283,73 0.09 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 53,55 → 108,109 0.09 ΔE 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline ColorValue 17,79 → 42,104 0.08 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 246,36 → 297,87 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,94 → 188,110 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 377,86 → 394,100 0.08 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 246,36 → 285,75 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,73 → 36,94 0.07 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 194,113 → 212,128 0.07 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 206,36 → 223,51 0.07 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 48,55 → 62,65 0.07 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 279,104 → 303,128 0.06 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 181,36 → 191,45 0.06 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 240,36 → 270,65 0.06 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) AntialiasCoverage 245,36 → 281,71 0.06 ΔE 0.2 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 246,36 → 292,82 0.06 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 201,113 → 219,128 0.05 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 41,55 → 56,69 0.05 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 376,86 → 388,95 0.05 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 223,36 → 236,50 0.05 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 226,36 → 241,49 0.05 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 243,68 → 303,128 0.05 ΔE 0.2 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 265,90 → 303,128 0.05 ΔE 0.2 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline ColorValue 17,55 → 26,64 0.04 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 216,113 → 233,128 0.04 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 53,55 → 66,67 0.04 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 282,107 → 303,128 0.04 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-overflow-clipping.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x overflow-clipping interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-overflow-clipping {overflow:hidden;max-height:58px;border-radius:9px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-overflow-clipping"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 13.16% (133665 px) interactions-cartesian-backgrounds-gradients-x-block-box-model · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
Cartesian family interaction for backgrounds-gradients and block-box-model: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (2285 total; showing 64 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 2285 133665 17,36 → 408,128 5205 total 17.3% · largest 0.7% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 20,50 → 92,114 0.7 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 67,50 → 138,114 0.7 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 32,50 → 101,114 0.5 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 17,66 → 57,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 89,64 → 139,114 0.4 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 55,50 → 124,114 0.4 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 230,36 → 268,65 0.4 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 218,36 → 255,65 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 17,50 → 49,82 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 99,74 → 139,114 0.3 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 269,94 → 303,128 0.3 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 77,52 → 139,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 82,57 → 139,114 0.3 ΔE 0.3 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.3) ColorValue 181,36 → 206,60 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 280,44 → 303,76 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 280,69 → 303,101 0.3 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 44,50 → 111,114 0.3 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 243,36 → 278,65 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 39,50 → 105,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 110,85 → 139,114 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 17,50 → 38,71 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 195,36 → 218,56 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 280,82 → 303,112 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 270,36 → 303,65 0.2 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 59,50 → 82,68 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 370,77 → 408,115 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 220,113 → 244,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 244,113 → 268,128 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 51,50 → 116,114 0.2 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 181,52 → 196,72 0.2 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 354,71 → 398,115 0.2 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 354,71 → 371,88 0.2 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 284,109 → 303,128 0.2 ΔE 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.2) ColorValue 257,36 → 289,65 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 257,113 → 279,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 381,88 → 408,115 0.1 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 364,71 → 408,115 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 280,57 → 303,84 0.1 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 280,62 → 303,89 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 29,50 → 94,114 0.1 ΔE 0.2 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0.2) ColorValue 64,50 → 129,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,113 → 201,128 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 358,71 → 404,115 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 123,98 → 139,114 0.1 ΔE 0.2 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.2) ColorValue 386,93 → 408,115 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 362,71 → 407,115 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 264,36 → 296,65 0.1 ΔE 0.2 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.2) ColorValue 354,89 → 374,111 0.1 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 43,50 → 107,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 53,50 → 118,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) AntialiasCoverage 62,50 → 126,114 0.1 ΔE 0.3 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline ColorValue 207,113 → 227,128 0.1 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 75,50 → 139,114 0.1 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 97,72 → 139,114 0.10 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,107 → 191,123 0.09 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 232,113 → 251,128 0.08 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 237,113 → 256,128 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 17,75 → 47,106 0.08 ΔE 0.3 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.3) ColorValue 181,95 → 188,110 0.08 ΔE 0.3 ΔRGB(0,1,1) fill recolour ΔRGB(+0,+1,+1) (ΔE 0.3) ColorValue 17,75 → 39,98 0.08 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 354,88 → 368,105 0.08 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) ColorValue 376,83 → 408,115 0.08 ΔE 0.3 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.3) ColorValue 377,71 → 394,85 0.07 ΔE 0.3 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3) ColorValue 194,113 → 212,128 0.07 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3)
source · cases/interactions/interactions-cartesian-backgrounds-gradients-x-block-box-model.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-gradients x block-box-model interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-gradients {background-image:linear-gradient(135deg,rgba(255,209,102,.82),rgba(6,214,160,.42));}
61 .f-block-box-model {box-sizing:border-box;padding:11px 7px;min-width:92px;max-width:132px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-gradients f-block-box-model"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-gradients"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-block-box-model"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-block-box-model"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-gradients"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.99% · raw 2.21% (8287 px) interactions-cartesian-filters-x-paged-media · same-element-and-bidirectional-nesting · 4 pages PASS via CSS-scale observation: one-sided sub-CSS outline coverage ColorValue missing 0.000466% ΔE 0.5
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff why: page 2: visually accepted coverage phase; raw fill recolour ΔRGB(+1,+1,+0) (ΔE 0.5)
Cartesian family interaction for filters and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (26 total; showing 26 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 Missing 1 1 14,34 → 14,34 1 total 0.000329% · largest 0.000329% ColorErr 25 8286 14,34 → 143,200 6862 total 2.7% · largest 2.3% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 14,34 → 143,200 2.3 ΔE 0.5 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.5) AntialiasCoverage 36,49 → 42,59 0.09 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline ColorValue 46,46 → 55,58 0.06 ΔRGB(4,4,2) fill recolour ΔRGB(+4,+4,+2) (ΔE 0) AntialiasCoverage 59,45 → 65,58 0.05 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 59,50 → 64,57 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 40,49 → 44,61 0.03 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 57,45 → 57,58 0.03 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 28,47 → 31,53 0.02 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 25,55 → 33,58 0.02 antialiasing coverage residue on a shared outline AntialiasCoverage 50,52 → 53,56 0.02 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 36,59 → 40,61 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 28,46 → 32,50 0.01 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 48,52 → 50,56 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 32,50 → 33,54 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 25,50 → 27,55 0.009528 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 50,47 → 53,49 0.008871 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 51,56 → 54,58 0.008871 ΔRGB(5,5,4) antialiasing coverage residue on a shared outline AntialiasCoverage 48,47 → 48,51 0.007556 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 33,55 → 35,58 0.006899 antialiasing coverage residue on a shared outline AntialiasCoverage 50,50 → 52,51 0.005914 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 27,48 → 28,50 0.003943 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 27,52 → 28,53 0.003285 ΔRGB(2,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 24,55 → 25,56 0.002957 ΔRGB(-2,-1,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 24,57 → 24,58 0.001971 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline Missing 14,34 → 14,34 0.000329 candidate lacks paint present in reference (0.000329%) AntialiasCoverage 41,60 → 41,60 0.000329 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-paged-media.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x paged-media interaction</title>
6 <style>
7 @page { size: 192px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 min-height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 padding: 7px;
35 border: 2px solid #577590;
36 background-color: #e7f5ff;
37 color: #17324d;
38 }
39 .node.inner {
40 width: 58px;
41 height: 48px;
42 padding: 5px;
43 }
44 .node.outer { min-height: 96px; }
45 .own { height: 22px; white-space: nowrap; }
46 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
47 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
48 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
49 .f-images-replaced > .own > .asset { display: inline-block; }
50 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
51 .f-lists-counters > .own > .token { counter-increment: pair-item; }
52 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
53 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
54 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
55 @supports (display:grid) {
56 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
57 }
58 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
59
60 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
61 .stage { display: block; margin: 0; break-before: page; }
62 .stage > .node { min-height: 68px; margin: 47px auto 0; }
63 .stage > .node.outer { margin-top: 33px; }
64 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
65 .f-paged-media {break-before:page;break-inside:avoid;}
66 </style>
67 </head>
68 <body>
69 <div class="stage"><div class="node f-filters f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
70 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-paged-media"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
71 <div class="stage"><div class="node outer f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
72 </body>
73 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.86% · raw 1.66% (16860 px) interactions-cartesian-backgrounds-borders-x-filters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: stable same-coordinate outline phase ColorValue missing 0.000579% extra 0.000579% ΔE 2.8
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill colour differs (ΔE 2.8)
Cartesian family interaction for backgrounds-borders and filters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (93 total; showing 64 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 89 16856 14,34 → 471,131 5000 total 2.2% · largest 0.6% Missing 2 2 14,48 → 22,104 1 total 0.000258% · largest 0.000129% Extra 2 2 19,113 → 21,115 1 total 0.000258% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 14,48 → 143,117 0.6 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0) ColorValue 352,65 → 410,113 0.4 ΔRGB(-1,-1,-1) fill recolour ΔRGB(-1,-1,-1) (ΔE 0) AntialiasCoverage 21,54 → 138,113 0.1 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline ColorValue 18,51 → 136,60 0.1 ΔRGB(2,2,2) fill recolour ΔRGB(+2,+2,+2) (ΔE 0) AntialiasCoverage 343,34 → 471,130 0.09 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 189,66 → 249,115 0.04 ΔRGB(-1,-1,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 364,49 → 370,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 36,64 → 43,76 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 60,60 → 66,73 0.04 ΔRGB(7,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 342,34 → 342,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 471,36 → 471,131 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 467,36 → 467,128 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 355,77 → 364,110 0.03 ΔRGB(2,2,2) fill recolour ΔRGB(+2,+2,+2) (ΔE 0) AntialiasCoverage 362,110 → 400,111 0.03 ΔRGB(9,9,8) antialiasing coverage residue on a shared outline AntialiasCoverage 16,57 → 17,105 0.02 ΔRGB(-21,-19,-19) antialiasing coverage residue on a shared outline AntialiasCoverage 188,66 → 190,114 0.02 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 387,50 → 392,58 0.02 antialiasing coverage residue on a shared outline AntialiasCoverage 245,68 → 245,112 0.02 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,76 → 217,88 0.02 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,76 → 380,88 0.02 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 58,60 → 59,73 0.02 ΔRGB(-26,-26,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 51,61 → 56,71 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 378,46 → 383,56 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 368,49 → 372,61 0.01 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 41,64 → 44,76 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 366,76 → 371,88 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 385,45 → 385,58 0.01 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 28,62 → 32,68 0.009817 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 355,47 → 359,53 0.009688 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 196,76 → 200,88 0.009688 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 374,46 → 374,58 0.009559 ΔRGB(5,5,3) antialiasing coverage residue on a shared outline AntialiasCoverage 47,61 → 47,73 0.009559 ΔRGB(6,6,4) antialiasing coverage residue on a shared outline AntialiasCoverage 208,76 → 208,88 0.009559 ΔRGB(7,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 372,76 → 372,88 0.009559 ΔRGB(6,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 387,45 → 392,51 0.009430 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 352,46 → 356,58 0.009430 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 390,51 → 393,58 0.008267 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 199,77 → 202,84 0.008138 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,77 → 366,84 0.008138 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 358,46 → 361,54 0.008009 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,82 → 215,86 0.007363 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 361,76 → 364,84 0.007234 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 51,67 → 54,71 0.006975 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,52 → 381,56 0.006846 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 376,82 → 379,86 0.006717 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 25,64 → 28,71 0.006459 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,77 → 214,81 0.006200 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 204,82 → 207,88 0.006200 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,47 → 381,51 0.006071 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 51,62 → 54,66 0.006071 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 18,104 → 21,111 0.005813 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 202,76 → 204,81 0.004909 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 31,61 → 33,66 0.004650 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,52 → 376,56 0.003617 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 49,67 → 49,71 0.003617 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 210,82 → 210,86 0.003617 ΔRGB(6,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 374,82 → 374,86 0.003617 ΔRGB(8,7,5) antialiasing coverage residue on a shared outline AntialiasCoverage 379,56 → 382,58 0.003359 ΔRGB(8,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 33,67 → 35,70 0.003359 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 52,71 → 55,73 0.003359 ΔRGB(10,9,9) antialiasing coverage residue on a shared outline AntialiasCoverage 376,77 → 379,79 0.003359 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 352,104 → 353,107 0.003359 antialiasing coverage residue on a shared outline AntialiasCoverage 376,47 → 376,51 0.003100 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 49,62 → 49,66 0.003100 ΔRGB(4,3,4) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-filters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x filters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.72% · raw 1.63% (6098 px) interactions-cartesian-filters-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages PASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 4.8
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff why: page 2: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Physical-page-context interaction for page-margins and filters: the filters representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
regions (37 total; showing 37 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 37 6098 8,8 → 160,97 2250 total 1.6% · largest 0.6%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 8,8 → 160,97 0.6 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline ColorValue 10,10 → 158,94 0.3 ΔRGB(-1,-1,-1) fill recolour ΔRGB(-1,-1,-1) (ΔE 0) AntialiasCoverage 19,41 → 73,85 0.1 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 52,20 → 58,32 0.08 ΔRGB(6,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 75,39 → 75,86 0.08 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 28,23 → 35,34 0.08 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 40,49 → 44,61 0.03 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 43,20 → 48,32 0.03 antialiasing coverage residue on a shared outline ColorValue 50,20 → 51,32 0.03 ΔRGB(-26,-25,-20) fill recolour ΔRGB(-26,-25,-20) (ΔE 0) AntialiasCoverage 33,23 → 36,35 0.02 ΔRGB(-2,-1,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 24,49 → 28,61 0.02 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 20,21 → 24,28 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline ColorValue 39,20 → 39,32 0.02 ΔRGB(5,5,3) fill recolour ΔRGB(+5,+5,+3) (ΔE 0) AntialiasCoverage 36,49 → 36,61 0.02 ΔRGB(7,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 27,52 → 31,57 0.02 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 17,20 → 21,32 0.02 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 30,49 → 33,58 0.02 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 43,26 → 46,30 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 40,55 → 43,60 0.01 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 40,51 → 43,54 0.01 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 43,21 → 46,25 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 25,25 → 28,32 0.01 antialiasing coverage residue on a shared outline AntialiasCoverage 23,20 → 25,25 0.008533 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 41,26 → 41,30 0.007467 ΔRGB(4,4,3) antialiasing coverage residue on a shared outline AntialiasCoverage 38,55 → 38,60 0.007467 ΔRGB(8,8,5) antialiasing coverage residue on a shared outline AntialiasCoverage 29,33 → 32,35 0.006933 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 41,21 → 41,25 0.006400 ΔRGB(4,4,3) antialiasing coverage residue on a shared outline AntialiasCoverage 38,51 → 38,54 0.006400 ΔRGB(9,9,5) antialiasing coverage residue on a shared outline AntialiasCoverage 18,29 → 20,32 0.005867 antialiasing coverage residue on a shared outline AntialiasCoverage 25,29 → 26,32 0.005867 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 33,58 → 35,61 0.005867 antialiasing coverage residue on a shared outline AntialiasCoverage 32,58 → 33,61 0.005333 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 26,58 → 27,60 0.004800 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 29,51 → 29,51 0.001067 ΔRGB(3,4,3) antialiasing coverage residue on a shared outline AntialiasCoverage 25,60 → 26,61 0.000800 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 17,86 → 17,87 0.000533 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 10,10 → 10,10 0.000267 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-page-margins.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x page-margins interaction</title>
6 <style>
7 @page {
8 size: 192px 200px;
9 margin: 16px;
10 background: #ffd6d6;
11 }
12 @page :left { margin: 8px 32px 24px 8px; }
13 @page :right { margin: 16px 8px 8px 32px; }
14 @page :first { margin: 32px 8px 16px 24px; }
15
16 @font-face {
17 font-family: MatrixSans;
18 src: url('../../fonts/ParitySans.ttf') format('truetype');
19 font-style: normal;
20 font-weight: 400;
21 }
22 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
23 * { box-sizing: border-box; margin: 0; }
24 html, body { background: #ffffff; }
25 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
26 .stage {
27 display: inline-flex;
28 width: 156px;
29 min-height: 164px;
30 margin-right: 8px;
31 align-items: center;
32 justify-content: center;
33 background: #f7fafc;
34 border: 1px solid #cbd5e1;
35 font-size: 16px;
36 vertical-align: top;
37 }
38 .stage:last-child { margin-right: 0; }
39 .node {
40 width: 126px;
41 padding: 7px;
42 border: 2px solid #577590;
43 background-color: #e7f5ff;
44 color: #17324d;
45 }
46 .node.inner {
47 width: 58px;
48 height: 48px;
49 padding: 5px;
50 }
51 .node.outer { min-height: 96px; }
52 .own { height: 22px; white-space: nowrap; }
53 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
54 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
55 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
56 .f-images-replaced > .own > .asset { display: inline-block; }
57 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
58 .f-lists-counters > .own > .token { counter-increment: pair-item; }
59 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
60 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
61 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
62 @supports (display:grid) {
63 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
64 }
65 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
66
67 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
68 .stage { display: block; margin: 0; break-before: page; }
69 .stage > .node { min-height: 68px; margin: 47px auto 0; }
70 .stage > .node.outer { margin-top: 33px; }
71
72 /* The three compositions occupy first/right, left, and later-right pages.
73 Their asymmetric page areas expose side selection, cascade, content
74 origin, bottom capacity, and paint that crosses a page-area edge.
75 Horizontal body padding is a distinct root-flow gutter: each stage
76 deliberately shifts through it to the physical page-area start edge. */
77 body { padding-left: 8px; padding-right: 8px; }
78 .stage {
79 width: 152px;
80 height: 128px;
81 min-height: 128px;
82 margin-left: -8px;
83 border: 0;
84 background: #d8f3dc;
85 }
86 .node { width: 100%; }
87 .stage > .node,
88 .stage > .node.outer { margin: 0; }
89 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
90 .f-page-margins {}
91 </style>
92 </head>
93 <body>
94 <div class="stage"><div class="node f-filters f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
95 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-page-margins"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
96 <div class="stage"><div class="node outer f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
97 </body>
98 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.29% · raw 1.49% (15175 px) interactions-cartesian-color-opacity-x-filters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: one-sided sub-CSS outline coverage ColorValue extra 0.06% ΔE 0.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill recolour ΔRGB(+0,+1,+0) (ΔE 0.3)
Cartesian family interaction for color-opacity and filters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (74 total; showing 64 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 73 14962 14,34 → 471,131 4635 total 1.9% · largest 0.6% · max ΔE 0.4 Extra 1 213 143,49 → 143,116 213 total 0.03% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 352,65 → 410,113 0.6 ΔE 0.3 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0.3) AntialiasCoverage 16,116 → 143,117 0.2 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,50 → 139,114 0.1 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 15,48 → 143,116 0.1 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 343,34 → 471,130 0.09 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 371,75 → 380,87 0.09 ΔE 0.4 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0.4) ColorValue 359,75 → 370,87 0.07 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0) AntialiasCoverage 36,63 → 44,75 0.05 antialiasing coverage residue on a shared outline AntialiasCoverage 188,65 → 248,112 0.04 ΔE 0.4 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,49 → 370,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 190,67 → 244,111 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 342,34 → 342,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 471,36 → 471,131 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 467,36 → 467,128 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline Extra 143,49 → 143,116 0.03 candidate adds paint absent from reference (0.03%) AntialiasCoverage 14,48 → 14,115 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 188,65 → 189,113 0.02 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 387,50 → 392,58 0.02 antialiasing coverage residue on a shared outline AntialiasCoverage 59,60 → 65,72 0.02 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 59,64 → 64,71 0.02 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline ColorValue 46,60 → 54,72 0.01 ΔRGB(3,4,2) fill recolour ΔRGB(+3,+4,+2) (ΔE 0) AntialiasCoverage 57,60 → 60,72 0.01 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,46 → 383,56 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 50,60 → 55,70 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,49 → 372,61 0.01 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 48,66 → 53,70 0.01 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 211,79 → 216,84 0.01 ΔRGB(-3,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 385,45 → 385,58 0.01 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 355,47 → 359,53 0.009688 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline ColorValue 374,46 → 374,58 0.009559 ΔRGB(5,5,3) fill recolour ΔRGB(+5,+5,+3) (ΔE 0) AntialiasCoverage 207,75 → 207,87 0.009559 ΔRGB(4,4,3) antialiasing coverage residue on a shared outline AntialiasCoverage 387,45 → 392,51 0.009430 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 352,46 → 356,58 0.009430 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 27,61 → 31,68 0.009430 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 195,76 → 199,86 0.008655 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 24,60 → 28,70 0.008396 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 390,51 → 393,58 0.008267 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 358,46 → 361,54 0.008009 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 30,60 → 33,69 0.007880 antialiasing coverage residue on a shared outline AntialiasCoverage 198,76 → 201,83 0.007621 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 48,61 → 53,65 0.007492 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,52 → 381,56 0.006846 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,47 → 381,51 0.006071 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 203,81 → 206,87 0.005942 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 211,81 → 214,85 0.005555 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 211,75 → 215,78 0.005296 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 32,69 → 35,72 0.005167 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 24,69 → 27,72 0.004004 antialiasing coverage residue on a shared outline AntialiasCoverage 212,85 → 215,87 0.003746 ΔRGB(7,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 376,52 → 376,56 0.003617 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 209,85 0.003617 ΔRGB(6,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 379,56 → 382,58 0.003359 ΔRGB(8,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 376,47 → 376,51 0.003100 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 209,76 → 209,80 0.003100 ΔRGB(6,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 353,55 → 355,58 0.002971 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 361,55 → 363,58 0.002971 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 211,76 → 213,78 0.002971 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 196,84 → 198,87 0.002971 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 203,84 → 204,87 0.002971 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,55 → 361,58 0.002842 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 201,75 → 203,78 0.002842 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 201,80 → 203,83 0.002713 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 50,64 → 52,65 0.002454 ΔRGB(-2,-3,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 202,79 → 203,80 0.001808 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-filters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x filters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-color-opacity {color:#5a189a;opacity:.76;}
61 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-color-opacity f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.47% · raw 1.49% (15116 px) interactions-cartesian-filters-x-generated-content · same-element-and-bidirectional-nestingPASS via CSS-scale observation: predominant shared-outline coverage AntialiasCoverage ΔE 0.4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for filters and generated-content: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (54 total; showing 54 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 54 15116 14,34 → 412,133 1793 total 2.0% · largest 0.2% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 179,34 → 307,131 0.2 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 352,84 → 412,133 0.2 ΔE 0.4 ΔRGB(1,0,1) fill recolour ΔRGB(+1,+0,+1) (ΔE 0.4) AntialiasCoverage 180,36 → 303,128 0.2 antialiasing coverage residue on a shared outline AntialiasCoverage 14,48 → 143,116 0.1 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 16,50 → 143,117 0.1 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 17,50 → 139,114 0.1 ΔRGB(-1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 189,67 → 244,111 0.1 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline ColorValue 354,129 → 408,130 0.07 ΔRGB(-19,-17,-8) fill recolour ΔRGB(-19,-17,-8) (ΔE 0) AntialiasCoverage 199,49 → 207,61 0.06 antialiasing coverage residue on a shared outline AntialiasCoverage 36,82 → 44,94 0.06 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 57,78 → 65,91 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 188,113 → 246,113 0.05 ΔRGB(-1,-1,0) fill recolour ΔRGB(-1,-1,+0) (ΔE 0) AntialiasCoverage 354,85 → 408,86 0.04 ΔRGB(40,36,31) antialiasing coverage residue on a shared outline AntialiasCoverage 46,79 → 55,91 0.04 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 207,94 → 216,106 0.04 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 229,58 0.03 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 359,94 → 370,106 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 14,48 → 14,115 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 195,94 → 206,106 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 219,58 0.02 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 188,65 → 246,65 0.02 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 196,78 → 200,86 0.02 antialiasing coverage residue on a shared outline AntialiasCoverage 24,63 → 29,71 0.02 antialiasing coverage residue on a shared outline AntialiasCoverage 24,83 → 35,91 0.02 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 25,104 → 29,112 0.02 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 371,94 → 379,106 0.02 ΔRGB(8,7,3) antialiasing coverage residue on a shared outline AntialiasCoverage 362,95 → 366,101 0.01 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 372,100 → 378,104 0.01 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 375,94 → 380,103 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 27,80 → 31,86 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 217,56 0.01 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 209,100 → 214,104 0.01 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 190,52 → 199,58 0.01 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 192,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 198,95 → 203,101 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 372,95 → 378,99 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 48,80 → 53,84 0.01 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 212,47 → 217,51 0.009946 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 30,79 → 33,87 0.007621 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 191,50 → 195,53 0.006588 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 192,46 → 196,52 0.005684 antialiasing coverage residue on a shared outline AntialiasCoverage 211,56 → 218,58 0.004779 ΔRGB(3,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 192,47 → 194,50 0.004134 antialiasing coverage residue on a shared outline AntialiasCoverage 27,79 → 29,83 0.003746 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 196,99 → 198,101 0.002454 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 198,95 → 199,97 0.002325 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 305,35 → 307,35 0.000775 ΔRGB(-2,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 197,98 → 198,98 0.000517 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,104 → 379,104 0.000388 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 201,99 → 201,100 0.000258 ΔRGB(3,1,3) fill recolour ΔRGB(+3,+1,+3) (ΔE 0) AntialiasCoverage 29,65 → 29,65 0.000129 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 202,99 → 202,99 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-generated-content.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x generated-content interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 .f-generated-content {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-filters f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-generated-content"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.79% · raw 1.46% (14846 px) interactions-cartesian-filters-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: predominant shared-outline coverage ColorValue ΔE 0.2
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill recolour ΔRGB(-1,-1,-1) (ΔE 0.2)
Cartesian family interaction for filters and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (161 total; showing 64 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 161 14846 15,34 → 417,131 2725 total 1.9% · largest 0.4% · max ΔE 0.2
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 15,56 → 149,125 0.4 ΔRGB(-1,-1,-1) fill recolour ΔRGB(-1,-1,-1) (ΔE 0) ColorValue 188,63 → 251,116 0.2 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0) ColorValue 190,65 → 249,114 0.2 ΔRGB(-2,-2,0) fill recolour ΔRGB(-2,-2,+0) (ΔE 0) AntialiasCoverage 353,62 → 417,117 0.2 ΔE 0.2 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline ColorValue 210,75 → 219,87 0.08 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0) AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 198,74 → 209,86 0.05 ΔRGB(-2,-1,0) fill recolour ΔRGB(-2,-1,+0) (ΔE 0) AntialiasCoverage 199,49 → 206,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 180,131 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 305,35 → 305,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 63,60 → 70,73 0.04 ΔRGB(4,4,3) antialiasing coverage residue on a shared outline AntialiasCoverage 303,36 → 303,128 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 40,62 → 47,73 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 31,59 → 39,70 0.02 ΔRGB(-13,-12,-11) antialiasing coverage residue on a shared outline ColorValue 201,76 → 206,82 0.02 ΔRGB(2,1,2) fill recolour ΔRGB(+2,+1,+2) (ΔE 0) AntialiasCoverage 55,60 → 59,72 0.02 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,75 → 383,83 0.02 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 61,60 → 63,73 0.01 ΔRGB(-12,-12,-10) antialiasing coverage residue on a shared outline AntialiasCoverage 214,46 → 219,55 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,49 → 207,61 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 28,59 → 34,70 0.01 ΔRGB(20,20,18) antialiasing coverage residue on a shared outline AntialiasCoverage 44,62 → 49,74 0.01 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 194,46 → 199,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 225,49 → 229,58 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 221,58 0.01 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 366,76 → 370,82 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 211,58 0.009559 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 50,60 → 52,72 0.009171 ΔRGB(10,10,4) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 192,58 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 374,75 → 376,86 0.008784 ΔRGB(8,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 369,74 → 372,83 0.007880 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 222,45 → 227,51 0.007750 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 54,67 → 58,71 0.006975 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,52 → 217,56 0.006846 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,81 → 382,85 0.006846 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 55,61 → 58,65 0.006200 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 41,72 → 44,74 0.005296 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,84 → 383,87 0.005296 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 363,78 → 366,83 0.004650 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 192,47 → 194,50 0.004134 antialiasing coverage residue on a shared outline AntialiasCoverage 214,48 → 217,51 0.004004 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 366,74 → 368,77 0.003875 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 212,56 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 222,56 → 225,58 0.003617 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 215,56 → 218,58 0.003488 ΔRGB(7,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 52,66 → 52,70 0.003488 ΔRGB(7,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 36,67 → 37,70 0.003359 ΔRGB(23,23,20) antialiasing coverage residue on a shared outline AntialiasCoverage 376,81 → 377,85 0.003359 ΔRGB(5,4,3) antialiasing coverage residue on a shared outline AntialiasCoverage 29,67 → 31,70 0.003229 ΔRGB(-21,-20,-19) antialiasing coverage residue on a shared outline AntialiasCoverage 212,47 → 212,51 0.003100 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 370,83 → 371,86 0.003100 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 196,55 → 197,58 0.002971 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 52,61 → 53,65 0.002971 ΔRGB(8,7,6) antialiasing coverage residue on a shared outline AntialiasCoverage 416,72 → 416,79 0.002842 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 416,76 → 416,83 0.002842 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 415,80 → 416,86 0.002842 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 415,87 → 415,93 0.002842 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 414,94 → 414,101 0.002842 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 414,98 → 414,104 0.002842 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 413,102 → 414,108 0.002842 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 413,105 → 413,112 0.002842 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 191,50 → 192,53 0.002713 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 377,80 0.002583 ΔRGB(8,7,4) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-filters f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.78% · raw 1.36% (13859 px) interactions-cartesian-filters-x-units-values · same-element-and-bidirectional-nestingPASS via CSS-scale observation: stable same-coordinate outline phase AntialiasCoverage missing 0.06% extra 0.06% ΔE 8.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for filters and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (72 total; showing 64 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 68 13426 6,34 → 403,131 2210 total 1.7% · largest 0.3% Missing 2 217 5,48 → 7,117 214 total 0.03% · largest 0.03% Extra 2 216 151,48 → 153,116 213 total 0.03% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 6,48 → 153,117 0.3 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline ColorValue 342,65 → 403,114 0.2 fill colour differs (ΔE 0) AntialiasCoverage 8,50 → 149,114 0.2 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 344,67 → 399,111 0.1 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline ColorValue 27,63 → 35,75 0.09 ΔRGB(2,2,1) fill recolour ΔRGB(+2,+2,+1) (ΔE 0) ColorValue 48,60 → 57,72 0.08 ΔRGB(-2,-2,-1) fill recolour ΔRGB(-2,-2,-1) (ΔE 0) ColorValue 15,60 → 27,72 0.07 ΔRGB(-1,-1,-1) fill recolour ΔRGB(-1,-1,-1) (ΔE 0) AntialiasCoverage 190,67 → 244,111 0.06 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 42,60 → 47,72 0.05 ΔRGB(-7,-7,-5) fill recolour ΔRGB(-7,-7,-5) (ΔE 0) AntialiasCoverage 199,49 → 206,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 180,131 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 305,35 → 305,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline ColorValue 366,75 → 371,87 0.04 ΔRGB(5,4,4) fill recolour ΔRGB(+5,+4,+4) (ΔE 0) AntialiasCoverage 303,36 → 303,128 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline Missing 5,48 → 5,116 0.03 candidate lacks paint present in reference (0.03%) Extra 153,49 → 153,116 0.03 candidate adds paint absent from reference (0.03%) ColorValue 37,60 → 38,72 0.02 ΔRGB(102,95,83) fill recolour ΔRGB(+102,+95,+83) (ΔE 0) AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 356,75 → 361,87 0.02 ΔRGB(44,40,34) antialiasing coverage residue on a shared outline AntialiasCoverage 350,75 → 355,87 0.01 ΔRGB(-45,-42,-36) antialiasing coverage residue on a shared outline ColorValue 353,76 → 357,83 0.01 ΔRGB(-1,-1,0) fill recolour ΔRGB(-1,-1,+0) (ΔE 0) AntialiasCoverage 362,75 → 363,87 0.01 ΔRGB(-77,-72,-62) antialiasing coverage residue on a shared outline AntialiasCoverage 214,46 → 219,55 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 213,75 → 216,84 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,49 → 207,61 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 194,46 → 199,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 225,49 → 229,58 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 221,58 0.01 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 195,76 → 199,87 0.009688 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 211,58 0.009559 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 207,75 → 207,87 0.009559 ΔRGB(8,6,7) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 192,58 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 198,76 → 201,83 0.008138 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 222,45 → 227,51 0.007750 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline ColorValue 39,66 → 40,70 0.007234 ΔRGB(-96,-91,-76) fill recolour ΔRGB(-96,-91,-76) (ΔE 0) AntialiasCoverage 214,52 → 217,56 0.006846 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline ColorValue 39,61 → 40,65 0.006200 ΔRGB(-96,-91,-76) fill recolour ΔRGB(-96,-91,-76) (ΔE 0) AntialiasCoverage 211,76 → 213,80 0.005425 ΔRGB(-3,-2,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 364,81 → 364,85 0.005425 ΔRGB(107,101,89) antialiasing coverage residue on a shared outline AntialiasCoverage 203,81 → 206,87 0.005296 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 364,80 0.004650 ΔRGB(107,101,89) antialiasing coverage residue on a shared outline AntialiasCoverage 192,47 → 194,50 0.004134 antialiasing coverage residue on a shared outline AntialiasCoverage 214,48 → 217,51 0.004004 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 351,84 → 353,87 0.004004 ΔRGB(33,31,26) antialiasing coverage residue on a shared outline AntialiasCoverage 211,81 → 214,84 0.003875 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 358,84 → 359,87 0.003875 ΔRGB(-45,-43,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 212,85 → 215,87 0.003746 ΔRGB(8,7,6) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 212,56 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 222,56 → 225,58 0.003617 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 202,77 → 203,81 0.003617 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 209,85 0.003617 ΔRGB(9,8,6) antialiasing coverage residue on a shared outline AntialiasCoverage 215,56 → 218,58 0.003488 ΔRGB(7,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 212,47 → 212,51 0.003100 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 209,76 → 209,80 0.003100 ΔRGB(8,7,6) antialiasing coverage residue on a shared outline AntialiasCoverage 203,84 → 204,87 0.003100 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 196,55 → 197,58 0.002971 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 191,50 → 192,53 0.002713 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 211,84 → 214,85 0.002713 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 196,84 → 198,87 0.002583 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 201,80 → 202,83 0.002454 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 194,51 → 195,53 0.002325 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 191,58 0.002325 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 216,48 0.001292 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-units-values.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x units-values interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 .f-units-values {width:calc(100% - 9px);padding-left:5%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-filters f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-units-values"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.48% · raw 1.36% (13789 px) interactions-cartesian-effects-x-filters · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.4
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+0,+0,-1) (ΔE 0.4)
Cartesian family interaction for effects and filters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (90 total; showing 64 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 90 13789 14,34 → 471,131 3836 total 1.8% · largest 0.5% · max ΔE 0.4
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 15,48 → 150,122 0.5 ΔE 0.4 ΔRGB(0,0,-1) fill recolour ΔRGB(+0,+0,-1) (ΔE 0.4) ColorValue 17,50 → 139,114 0.2 ΔRGB(0,-1,-3) fill recolour ΔRGB(+0,-1,-3) (ΔE 0) AntialiasCoverage 343,34 → 471,130 0.09 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 188,65 → 248,114 0.08 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline ColorValue 354,67 → 408,67 0.04 ΔRGB(1,-1,-4) fill recolour ΔRGB(+1,-1,-4) (ΔE 0) ColorValue 354,110 → 408,111 0.04 ΔRGB(0,1,7) fill recolour ΔRGB(+0,+1,+7) (ΔE 0) AntialiasCoverage 364,49 → 370,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 36,63 → 42,75 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 356,68 → 406,69 0.04 ΔRGB(-1,2,7) antialiasing coverage residue on a shared outline AntialiasCoverage 356,108 → 406,109 0.04 ΔRGB(1,-1,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 190,67 → 244,111 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 342,34 → 342,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 471,36 → 471,131 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 59,60 → 65,72 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 467,36 → 467,128 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 14,48 → 14,115 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline ColorValue 190,113 → 245,113 0.02 ΔRGB(-1,0,0) fill recolour ΔRGB(-1,+0,+0) (ΔE 0) AntialiasCoverage 387,50 → 392,58 0.02 antialiasing coverage residue on a shared outline AntialiasCoverage 50,60 → 55,72 0.02 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 211,75 → 216,84 0.02 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 378,46 → 383,56 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 368,49 → 372,61 0.01 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 40,63 → 44,75 0.01 ΔRGB(-3,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 375,75 → 380,83 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 359,75 → 364,85 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,76 → 366,83 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 385,45 → 385,58 0.01 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 57,60 → 57,72 0.01 ΔRGB(-3,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 355,47 → 359,53 0.009688 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 30,60 → 34,70 0.009688 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 195,76 → 199,87 0.009688 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 374,46 → 374,58 0.009559 ΔRGB(5,5,3) fill recolour ΔRGB(+5,+5,+3) (ΔE 0) AntialiasCoverage 24,60 → 28,72 0.009559 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 46,60 → 46,72 0.009559 ΔRGB(6,6,3) fill recolour ΔRGB(+6,+6,+3) (ΔE 0) AntialiasCoverage 207,75 → 207,87 0.009559 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline ColorValue 371,75 → 371,87 0.009559 ΔRGB(10,10,5) fill recolour ΔRGB(+10,+10,+5) (ΔE 0) AntialiasCoverage 387,45 → 392,51 0.009430 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 352,46 → 356,58 0.009430 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 390,51 → 393,58 0.008267 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 198,76 → 201,83 0.008138 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 358,46 → 361,54 0.008009 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,81 → 378,85 0.007105 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,52 → 381,56 0.006846 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 50,66 → 53,70 0.006846 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 211,81 → 214,85 0.006846 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,77 → 368,84 0.006200 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 203,81 → 206,87 0.006200 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,47 → 381,51 0.006071 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 375,76 → 378,80 0.005813 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 27,62 → 29,68 0.004909 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 201,75 → 203,80 0.004909 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,84 → 380,87 0.004521 ΔRGB(4,4,3) antialiasing coverage residue on a shared outline AntialiasCoverage 29,62 → 31,68 0.004263 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 212,85 → 215,87 0.003746 ΔRGB(9,8,7) antialiasing coverage residue on a shared outline AntialiasCoverage 376,52 → 376,56 0.003617 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 48,66 → 48,70 0.003617 ΔRGB(4,3,4) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 209,85 0.003617 ΔRGB(7,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 372,81 → 373,85 0.003617 ΔRGB(7,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 50,61 → 53,63 0.003488 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,56 → 382,58 0.003359 ΔRGB(8,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 376,47 → 376,51 0.003100 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 48,61 → 48,65 0.003100 ΔRGB(4,3,4) antialiasing coverage residue on a shared outline AntialiasCoverage 209,76 → 209,80 0.003100 ΔRGB(7,6,6) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-filters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x filters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.72% · raw 1.28% (12969 px) interactions-cartesian-filters-x-overflow-clipping · same-element-and-bidirectional-nestingPASS via CSS-scale observation: one-sided sub-CSS outline coverage AntialiasCoverage extra 0.001044% ΔE 2.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for filters and overflow-clipping: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (91 total; showing 64 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 89 12966 14,34 → 412,131 2114 total 1.7% · largest 0.3% Extra 2 3 22,52 → 133,52 2 total 0.000388% · largest 0.000258%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 14,52 → 143,112 0.3 ΔRGB(2,3,2) antialiasing coverage residue on a shared outline ColorValue 188,65 → 246,113 0.1 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0) ColorValue 189,67 → 244,111 0.1 ΔRGB(1,1,1) fill recolour ΔRGB(+1,+1,+1) (ΔE 0) ColorValue 17,55 → 134,109 0.1 ΔRGB(-3,-2,-2) fill recolour ΔRGB(-3,-2,-2) (ΔE 0) AntialiasCoverage 352,84 → 412,109 0.08 ΔRGB(-2,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,52 → 132,56 0.05 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 354,85 → 408,86 0.04 ΔRGB(4,4,3) antialiasing coverage residue on a shared outline AntialiasCoverage 199,49 → 206,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 36,68 → 42,80 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 132,55 → 139,103 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,94 → 380,106 0.04 ΔRGB(8,7,3) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 180,131 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 305,35 → 305,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 303,36 → 303,128 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 359,94 → 370,106 0.03 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 59,65 → 65,77 0.03 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 140,60 → 141,105 0.02 ΔRGB(8,7,5) antialiasing coverage residue on a shared outline AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,95 → 366,101 0.01 ΔRGB(6,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 214,46 → 219,55 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 50,65 → 55,75 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 213,75 → 216,84 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,49 → 207,61 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 40,68 → 44,80 0.01 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 194,46 → 199,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 372,95 → 378,99 0.01 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 27,67 → 31,73 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 225,49 → 229,58 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 410,85 → 412,109 0.01 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 221,58 0.01 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 57,65 → 57,77 0.01 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 195,76 → 199,87 0.009688 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 211,58 0.009559 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline ColorValue 46,65 → 46,77 0.009559 ΔRGB(7,7,4) fill recolour ΔRGB(+7,+7,+4) (ΔE 0) AntialiasCoverage 207,75 → 207,87 0.009559 ΔRGB(8,6,7) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 192,58 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 30,65 → 33,74 0.008138 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 198,76 → 201,83 0.008138 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 222,45 → 227,51 0.007750 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 25,65 → 28,74 0.007621 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 50,71 → 53,76 0.007105 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 214,52 → 217,56 0.006846 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 50,67 → 53,70 0.006071 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 211,76 → 213,80 0.005425 ΔRGB(-3,-2,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 203,81 → 206,87 0.005296 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 192,47 → 194,50 0.004134 antialiasing coverage residue on a shared outline AntialiasCoverage 214,48 → 217,51 0.004004 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 211,81 → 214,84 0.003875 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,85 → 215,87 0.003746 ΔRGB(8,7,6) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 212,56 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 222,56 → 225,58 0.003617 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 48,71 → 48,76 0.003617 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 202,77 → 203,81 0.003617 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 209,85 0.003617 ΔRGB(9,8,6) antialiasing coverage residue on a shared outline AntialiasCoverage 215,56 → 218,58 0.003488 ΔRGB(7,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 136,105 → 138,108 0.003488 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 51,76 → 54,77 0.003229 ΔRGB(11,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 212,47 → 212,51 0.003100 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 48,67 → 48,70 0.003100 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 209,76 → 209,80 0.003100 ΔRGB(8,7,6) antialiasing coverage residue on a shared outline AntialiasCoverage 203,84 → 204,87 0.003100 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 196,55 → 197,58 0.002971 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 32,74 → 33,77 0.002971 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-overflow-clipping.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x overflow-clipping interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 .f-overflow-clipping {overflow:hidden;max-height:58px;border-radius:9px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-filters f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-overflow-clipping"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.60% · raw 1.19% (12127 px) interactions-cartesian-filters-x-multicol · same-element-and-bidirectional-nestingPASS via CSS-scale observation: predominant shared-outline coverage ColorValue ΔE 4.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill recolour ΔRGB(-1,+0,-1) (ΔE 4.6)
Cartesian family interaction for filters and multicol: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (85 total; showing 64 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 85 12127 14,34 → 470,131 1832 total 1.6% · largest 0.2%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 410,43 → 470,92 0.2 ΔRGB(-1,0,0) fill recolour ΔRGB(-1,+0,+0) (ΔE 0) AntialiasCoverage 412,44 → 466,89 0.2 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 76,57 → 79,107 0.08 ΔRGB(1,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 15,48 → 143,116 0.08 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,50 → 139,114 0.08 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline ColorValue 416,53 → 428,65 0.07 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0) AntialiasCoverage 190,67 → 244,111 0.06 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,117 → 143,117 0.05 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline ColorValue 433,53 → 438,65 0.05 ΔRGB(-9,-8,-7) fill recolour ΔRGB(-9,-8,-7) (ΔE 0) AntialiasCoverage 199,49 → 206,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 180,131 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 305,35 → 305,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 303,36 → 303,128 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 36,63 → 42,75 0.04 antialiasing coverage residue on a shared outline AntialiasCoverage 59,60 → 65,72 0.04 antialiasing coverage residue on a shared outline AntialiasCoverage 14,48 → 14,115 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 143,50 → 143,117 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline ColorValue 428,53 → 429,65 0.02 ΔRGB(78,74,65) fill recolour ΔRGB(+78,+74,+65) (ΔE 0) AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 50,60 → 55,70 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 214,46 → 219,55 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,49 → 207,61 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 213,75 → 216,84 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 40,63 → 44,75 0.01 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 194,46 → 199,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 27,61 → 31,68 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 225,49 → 229,58 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 221,58 0.01 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 57,60 → 57,72 0.01 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 195,76 → 199,87 0.009688 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 211,58 0.009559 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 24,60 → 28,72 0.009559 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 46,60 → 46,72 0.009559 ΔRGB(6,6,4) fill recolour ΔRGB(+6,+6,+4) (ΔE 0) AntialiasCoverage 207,75 → 207,87 0.009559 ΔRGB(8,6,7) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 192,58 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 198,76 → 201,83 0.008138 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 30,60 → 33,68 0.008009 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 222,45 → 227,51 0.007750 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline ColorValue 430,59 → 431,63 0.007234 ΔRGB(-60,-57,-53) fill recolour ΔRGB(-60,-57,-53) (ΔE 0) AntialiasCoverage 214,52 → 217,56 0.006846 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 50,66 → 53,70 0.006330 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline ColorValue 430,54 → 431,58 0.006200 ΔRGB(-60,-57,-53) fill recolour ΔRGB(-60,-57,-53) (ΔE 0) AntialiasCoverage 211,76 → 213,80 0.005425 ΔRGB(-3,-2,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 203,81 → 206,87 0.005296 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 37,64 → 39,69 0.005167 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 192,47 → 194,50 0.004134 antialiasing coverage residue on a shared outline AntialiasCoverage 214,48 → 217,51 0.004004 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 211,81 → 214,84 0.003875 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,85 → 215,87 0.003746 ΔRGB(8,7,6) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 212,56 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 222,56 → 225,58 0.003617 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 48,66 → 48,70 0.003617 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 202,77 → 203,81 0.003617 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 209,85 0.003617 ΔRGB(9,8,6) antialiasing coverage residue on a shared outline AntialiasCoverage 215,56 → 218,58 0.003488 ΔRGB(7,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 50,61 → 53,63 0.003359 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,47 → 212,51 0.003100 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 48,61 → 48,65 0.003100 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 51,70 → 54,72 0.003100 ΔRGB(10,10,9) antialiasing coverage residue on a shared outline AntialiasCoverage 209,76 → 209,80 0.003100 ΔRGB(8,7,6) antialiasing coverage residue on a shared outline AntialiasCoverage 203,84 → 204,87 0.003100 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 196,55 → 197,58 0.002971 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 32,69 → 33,72 0.002971 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-multicol.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x multicol interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-filters f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.35% · raw 1.17% (11933 px) interactions-cartesian-filters-x-filters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: one-sided sub-CSS outline coverage AntialiasCoverage missing 0.01% ΔE 1.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for filters and filters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (115 total; showing 64 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 114 11896 14,34 → 471,131 704 total 1.5% · largest 0.09% Missing 1 37 371,75 → 371,87 37 total 0.004779% · largest 0.004779%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 343,34 → 471,130 0.09 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 15,48 → 143,116 0.08 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 190,67 → 244,111 0.08 ΔRGB(0,0,-1) fill recolour ΔRGB(+0,+0,-1) (ΔE 0) AntialiasCoverage 17,50 → 139,114 0.08 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,117 → 143,117 0.05 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline ColorValue 354,110 → 407,111 0.04 ΔRGB(0,0,-1) fill recolour ΔRGB(+0,+0,-1) (ΔE 0) AntialiasCoverage 199,49 → 206,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 364,49 → 370,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 180,131 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 342,34 → 342,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 305,35 → 305,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 471,36 → 471,131 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 303,36 → 303,128 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 467,36 → 467,128 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 36,63 → 42,75 0.04 antialiasing coverage residue on a shared outline AntialiasCoverage 59,60 → 65,72 0.04 antialiasing coverage residue on a shared outline AntialiasCoverage 14,48 → 14,115 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 143,50 → 143,117 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline ColorValue 354,113 → 410,113 0.02 ΔRGB(-1,0,0) fill recolour ΔRGB(-1,+0,+0) (ΔE 0) ColorValue 190,113 → 245,113 0.02 ΔRGB(-1,0,0) fill recolour ΔRGB(-1,+0,+0) (ΔE 0) AntialiasCoverage 387,50 → 392,58 0.02 antialiasing coverage residue on a shared outline AntialiasCoverage 211,75 → 216,84 0.02 ΔRGB(-2,-1,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 246,66 → 246,112 0.02 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 375,75 → 380,87 0.02 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 50,60 → 55,70 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 214,46 → 219,55 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,46 → 383,56 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 204,49 → 207,61 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 368,49 → 372,61 0.01 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 40,63 → 44,75 0.01 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 201,75 → 206,87 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 194,46 → 199,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 195,76 → 199,87 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 27,61 → 31,68 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 225,49 → 229,58 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,76 → 366,83 0.01 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 221,58 0.01 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 385,45 → 385,58 0.01 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 57,60 → 57,72 0.01 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 355,47 → 359,53 0.009688 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 211,58 0.009559 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline ColorValue 374,46 → 374,58 0.009559 ΔRGB(5,5,3) fill recolour ΔRGB(+5,+5,+3) (ΔE 0) AntialiasCoverage 24,60 → 28,72 0.009559 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 46,60 → 46,72 0.009559 ΔRGB(6,6,4) fill recolour ΔRGB(+6,+6,+4) (ΔE 0) AntialiasCoverage 207,75 → 207,87 0.009559 ΔRGB(8,7,6) antialiasing coverage residue on a shared outline AntialiasCoverage 387,45 → 392,51 0.009430 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 352,46 → 356,58 0.009430 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 192,58 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,75 → 364,84 0.008655 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,75 → 368,84 0.008526 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 390,51 → 393,58 0.008267 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 358,46 → 361,54 0.008009 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 30,60 → 33,68 0.008009 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 198,76 → 201,83 0.007880 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 222,45 → 227,51 0.007750 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 375,81 → 378,85 0.006975 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 214,52 → 217,56 0.006846 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,52 → 381,56 0.006846 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 211,81 → 214,85 0.006846 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 50,66 → 53,70 0.006330 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,47 → 381,51 0.006071 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 375,76 → 378,80 0.005942 ΔRGB(-3,-2,-1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-filters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x filters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 </style>
62 </head>
63 <body>
64 <div class="stage"><div class="node f-filters f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
65 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 </body>
68 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.51% · raw 1.13% (11524 px) interactions-cartesian-filters-x-selectors-cascade · same-element-and-bidirectional-nestingPASS via CSS-scale observation: predominant shared-outline coverage ColorValue ΔE 1.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill colour differs (ΔE 1.5)
Cartesian family interaction for filters and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (86 total; showing 64 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 86 11524 14,34 → 412,131 3722 total 1.5% · largest 0.5%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 14,48 → 143,117 0.5 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0) ColorValue 188,110 → 246,113 0.10 ΔRGB(4,2,1) fill recolour ΔRGB(+4,+2,+1) (ΔE 0) ColorValue 188,65 → 246,67 0.10 ΔRGB(-1,3,2) fill recolour ΔRGB(-1,+3,+2) (ΔE 0) AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 352,65 → 412,113 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 199,49 → 206,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 180,131 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 305,35 → 305,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 59,60 → 65,72 0.04 ΔRGB(1,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 303,36 → 303,128 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 36,63 → 42,75 0.04 antialiasing coverage residue on a shared outline ColorValue 354,113 → 410,113 0.02 ΔRGB(-1,0,0) fill recolour ΔRGB(-1,+0,+0) (ΔE 0) AntialiasCoverage 354,111 → 407,111 0.02 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 412,67 → 412,113 0.02 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 211,75 → 216,87 0.02 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 51,60 → 55,72 0.02 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 214,46 → 219,55 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,75 → 380,84 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 204,49 → 207,61 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 40,63 → 44,75 0.01 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 194,46 → 199,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 27,61 → 31,68 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 225,49 → 229,58 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,77 → 366,83 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 221,58 0.01 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 57,60 → 57,72 0.01 ΔRGB(-1,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 195,76 → 199,87 0.009688 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 211,58 0.009559 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 24,60 → 28,72 0.009559 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 46,60 → 46,72 0.009559 ΔRGB(3,7,5) antialiasing coverage residue on a shared outline AntialiasCoverage 207,75 → 207,87 0.009559 ΔRGB(3,10,10) antialiasing coverage residue on a shared outline AntialiasCoverage 371,75 → 371,87 0.009559 ΔRGB(8,7,4) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 192,58 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,75 → 368,84 0.008655 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 198,76 → 201,83 0.008138 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 30,60 → 33,68 0.008009 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 222,45 → 227,51 0.007750 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 375,81 → 378,85 0.007105 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 50,66 → 53,70 0.006975 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,52 → 217,56 0.006846 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 211,81 → 214,85 0.006846 ΔRGB(1,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,75 → 364,82 0.006717 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,76 → 378,80 0.006071 ΔRGB(-3,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 50,61 → 53,65 0.005684 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 211,76 → 213,80 0.005684 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 203,81 → 206,87 0.005296 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 37,64 → 39,69 0.005167 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 192,47 → 194,50 0.004134 antialiasing coverage residue on a shared outline AntialiasCoverage 359,83 → 361,87 0.004134 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,48 → 217,51 0.004004 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 212,56 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 222,56 → 225,58 0.003617 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 48,66 → 48,70 0.003617 ΔRGB(2,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 202,77 → 203,81 0.003617 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 209,85 0.003617 ΔRGB(3,9,9) antialiasing coverage residue on a shared outline AntialiasCoverage 372,81 → 373,85 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 376,85 → 379,87 0.003617 ΔRGB(11,10,9) antialiasing coverage residue on a shared outline AntialiasCoverage 215,56 → 218,58 0.003488 ΔRGB(7,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 212,47 → 212,51 0.003100 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 48,61 → 48,65 0.003100 ΔRGB(2,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 209,76 → 209,80 0.003100 ΔRGB(3,9,9) antialiasing coverage residue on a shared outline AntialiasCoverage 372,76 → 373,80 0.003100 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 203,84 → 204,87 0.003100 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-selectors-cascade.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x selectors-cascade interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 .f-selectors-cascade {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-filters f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-selectors-cascade"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.48% · raw 1.04% (10612 px) interactions-cartesian-filters-x-fonts-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 3.8
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for filters and fonts-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (103 total; showing 64 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 103 10612 14,34 → 412,131 615 total 1.4% · largest 0.08%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 15,48 → 143,116 0.08 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,50 → 139,114 0.08 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 36,62 → 47,75 0.07 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 190,67 → 244,111 0.06 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,117 → 143,117 0.05 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 207,75 → 219,87 0.05 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 46,60 → 58,72 0.05 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 371,75 → 382,87 0.05 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 352,65 → 412,113 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 199,49 → 206,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 359,75 → 370,87 0.04 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 180,131 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 195,75 → 206,87 0.04 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 24,60 → 35,72 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 305,35 → 305,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 303,36 → 303,128 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 14,48 → 14,115 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 143,50 → 143,117 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 60,60 → 66,71 0.03 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline ColorValue 354,113 → 410,113 0.02 ΔRGB(-1,0,0) fill recolour ΔRGB(-1,+0,+0) (ΔE 0) AntialiasCoverage 354,111 → 407,111 0.02 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 412,67 → 412,113 0.02 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 199,76 → 204,83 0.02 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline ColorValue 364,76 → 368,83 0.02 ΔRGB(5,5,4) fill recolour ΔRGB(+5,+5,+4) (ΔE 0) ColorValue 28,61 → 33,68 0.02 ΔRGB(3,2,2) fill recolour ΔRGB(+3,+2,+2) (ΔE 0) AntialiasCoverage 59,63 → 67,72 0.01 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 373,81 → 380,85 0.01 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 48,66 → 55,70 0.01 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 215,85 0.01 ΔRGB(5,5,4) antialiasing coverage residue on a shared outline AntialiasCoverage 214,46 → 219,55 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,46 → 386,58 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 204,49 → 207,61 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 194,46 → 199,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 352,46 → 361,58 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 225,49 → 229,58 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 388,50 → 394,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 221,58 0.01 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 356,48 → 361,53 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 58,60 → 62,70 0.009946 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 211,58 0.009559 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 374,46 → 379,58 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 192,58 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,46 → 363,58 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 378,47 → 384,51 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 390,49 → 395,58 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 222,45 → 227,51 0.007750 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 385,46 → 390,58 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 214,52 → 217,56 0.006846 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,52 → 382,56 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 192,47 → 194,50 0.004134 antialiasing coverage residue on a shared outline AntialiasCoverage 214,48 → 217,51 0.004004 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 212,56 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 222,56 → 225,58 0.003617 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,52 → 378,56 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 215,56 → 218,58 0.003488 ΔRGB(7,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 389,46 → 391,50 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 212,47 → 212,51 0.003100 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 196,55 → 197,58 0.002971 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 191,50 → 192,53 0.002713 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 353,55 → 356,58 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 361,55 → 361,58 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 194,51 → 195,53 0.002325 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-fonts-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x fonts-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-filters f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.44% · raw 1.03% (10411 px) interactions-cartesian-filters-x-images-replaced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 4.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for filters and images-replaced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (89 total; showing 64 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 89 10411 14,34 → 412,131 1446 total 1.3% · largest 0.2%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 59,57 → 100,81 0.2 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 15,48 → 143,116 0.08 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 216,72 → 251,96 0.08 ΔRGB(-23,-22,-28) antialiasing coverage residue on a shared outline AntialiasCoverage 17,50 → 139,114 0.08 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 352,43 → 412,113 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,117 → 143,117 0.05 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 36,72 → 42,84 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 199,49 → 206,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 180,131 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 305,35 → 305,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 303,36 → 303,128 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 190,96 → 244,111 0.03 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 14,48 → 14,115 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 143,50 → 143,117 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline ColorValue 354,113 → 410,113 0.02 ΔRGB(-1,0,0) fill recolour ΔRGB(-1,+0,+0) (ΔE 0) AntialiasCoverage 354,111 → 407,111 0.02 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 211,84 → 216,93 0.02 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 412,66 → 412,113 0.02 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 50,69 → 55,81 0.02 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,46 → 219,55 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,75 → 380,84 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 204,49 → 207,61 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 40,72 → 44,84 0.01 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 194,46 → 199,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 225,49 → 229,58 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,77 → 366,83 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 221,58 0.01 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 57,68 → 57,81 0.01 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 27,70 → 31,76 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 211,58 0.009559 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 24,69 → 28,81 0.009559 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 46,69 → 46,81 0.009559 ΔRGB(9,8,5) antialiasing coverage residue on a shared outline AntialiasCoverage 371,75 → 371,87 0.009559 ΔRGB(8,7,4) antialiasing coverage residue on a shared outline AntialiasCoverage 207,84 → 207,96 0.009559 ΔRGB(7,5,6) antialiasing coverage residue on a shared outline AntialiasCoverage 195,84 → 199,96 0.009559 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 192,58 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,75 → 368,84 0.008655 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 30,69 → 33,77 0.008138 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 222,45 → 227,51 0.007750 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 198,85 → 201,92 0.007492 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 375,81 → 378,85 0.007105 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 50,75 → 53,79 0.006975 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 214,52 → 217,56 0.006846 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 211,90 → 214,94 0.006846 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,75 → 364,82 0.006717 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,76 → 378,80 0.006071 ΔRGB(-3,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 50,70 → 53,74 0.005942 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 203,90 → 206,96 0.005813 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 244,67 → 244,72 0.004263 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 192,47 → 194,50 0.004134 antialiasing coverage residue on a shared outline AntialiasCoverage 359,83 → 361,87 0.004134 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,48 → 217,51 0.004004 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,94 → 215,96 0.003746 ΔRGB(9,8,6) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 212,56 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 222,56 → 225,58 0.003617 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 48,75 → 48,79 0.003617 ΔRGB(6,5,4) antialiasing coverage residue on a shared outline AntialiasCoverage 372,81 → 373,85 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 376,85 → 379,87 0.003617 ΔRGB(11,10,9) antialiasing coverage residue on a shared outline AntialiasCoverage 209,90 → 209,94 0.003617 ΔRGB(7,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 215,56 → 218,58 0.003488 ΔRGB(7,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 202,86 → 203,90 0.003488 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,47 → 212,51 0.003100 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-images-replaced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x images-replaced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 .f-images-replaced {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-filters f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.36% · raw 0.98% (9923 px) interactions-cartesian-filters-x-lists-counters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: predominant shared-outline coverage AntialiasCoverage ΔE 1.4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for filters and lists-counters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (106 total; showing 64 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 106 9923 14,34 → 412,131 615 total 1.3% · largest 0.08%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 15,48 → 143,116 0.08 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,50 → 139,114 0.08 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,117 → 143,117 0.05 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 352,65 → 412,113 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 51,63 → 57,75 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 190,86 → 245,111 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 199,49 → 206,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 222,75 → 230,87 0.04 ΔRGB(1,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 180,131 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 305,35 → 305,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 303,36 → 303,128 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 61,60 → 69,72 0.03 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 14,48 → 14,115 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 143,50 → 143,117 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 81,60 → 85,72 0.02 ΔRGB(7,7,6) antialiasing coverage residue on a shared outline ColorValue 354,113 → 410,113 0.02 ΔRGB(-1,0,0) fill recolour ΔRGB(-1,+0,+0) (ΔE 0) AntialiasCoverage 354,111 → 407,111 0.02 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 412,67 → 412,113 0.02 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 242,67 → 246,83 0.02 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 89,64 → 94,71 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 89,63 → 96,72 0.01 antialiasing coverage residue on a shared outline AntialiasCoverage 214,46 → 219,55 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 216,75 → 221,87 0.01 ΔRGB(18,17,15) antialiasing coverage residue on a shared outline AntialiasCoverage 210,75 → 215,87 0.01 ΔRGB(-19,-18,-17) antialiasing coverage residue on a shared outline AntialiasCoverage 213,76 → 218,83 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 375,75 → 380,84 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 55,63 → 59,75 0.01 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 204,49 → 207,61 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 30,60 → 33,72 0.01 ΔRGB(-1,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 201,75 → 204,87 0.01 ΔRGB(-1,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 45,60 → 50,72 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 194,46 → 199,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 225,49 → 229,58 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,77 → 366,83 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 221,58 0.01 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 88,60 → 88,72 0.01 ΔRGB(-6,-6,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 211,58 0.009559 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 77,60 → 77,72 0.009559 ΔRGB(-19,-18,-16) antialiasing coverage residue on a shared outline AntialiasCoverage 237,75 → 238,87 0.009559 ΔRGB(10,9,5) antialiasing coverage residue on a shared outline AntialiasCoverage 371,75 → 371,87 0.009559 ΔRGB(8,7,4) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 192,58 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,75 → 368,84 0.008655 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 242,81 → 244,85 0.008526 antialiasing coverage residue on a shared outline AntialiasCoverage 89,60 → 93,65 0.008009 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 61,66 → 66,72 0.007880 ΔRGB(1,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 222,45 → 227,51 0.007750 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 375,81 → 378,85 0.007105 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 214,52 → 217,56 0.006846 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,75 → 364,82 0.006717 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 28,62 → 28,70 0.006588 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 81,66 → 84,70 0.006330 ΔRGB(-8,-9,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 196,76 → 199,85 0.006330 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 242,76 → 244,80 0.006071 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 375,76 → 378,80 0.006071 ΔRGB(-3,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 25,60 → 28,62 0.005555 ΔRGB(1,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 45,63 → 47,68 0.004779 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 36,69 → 37,72 0.004779 ΔRGB(0,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 233,84 → 235,87 0.004779 ΔRGB(-1,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 42,63 → 44,68 0.004263 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 192,47 → 194,50 0.004134 antialiasing coverage residue on a shared outline AntialiasCoverage 359,83 → 361,87 0.004134 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,84 → 208,87 0.004134 ΔRGB(-1,-4,-4) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-lists-counters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x lists-counters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 .f-lists-counters {counter-reset:pair-item;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-filters f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.29% · raw 0.96% (9788 px) interactions-cartesian-filters-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.000871% extra 0.01% ΔE 0.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for filters and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (170 total; showing 64 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 159 9749 14,34 → 412,131 615 total 1.3% · largest 0.08% · max ΔE 2.3 Extra 10 36 27,60 → 395,85 9 total 0.004650% · largest 0.001163% Missing 1 3 353,63 → 353,64 3 total 0.000388% · largest 0.000388%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 15,48 → 143,116 0.08 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,50 → 139,114 0.08 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 190,67 → 244,111 0.06 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,117 → 143,117 0.05 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 352,65 → 412,113 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 36,63 → 42,75 0.04 ΔE 0.4 antialiasing coverage residue on a shared outline AntialiasCoverage 199,49 → 206,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 58,60 → 66,73 0.04 ΔE 0.8 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 180,131 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 305,35 → 305,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 303,36 → 303,128 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 353,63 → 395,64 0.03 ΔE 0.7 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 14,48 → 14,115 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 143,50 → 143,117 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline ColorValue 354,113 → 410,113 0.02 ΔRGB(-1,0,0) fill recolour ΔRGB(-1,+0,+0) (ΔE 0) AntialiasCoverage 354,111 → 407,111 0.02 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,75 → 380,87 0.02 ΔE 0.9 ΔRGB(-2,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 412,67 → 412,113 0.02 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 213,75 → 217,88 0.02 ΔE 0.8 ΔRGB(-2,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 50,60 → 55,70 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 214,46 → 219,55 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,49 → 207,61 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 40,63 → 44,75 0.01 ΔRGB(-3,-2,-3) antialiasing coverage residue on a shared outline ColorValue 32,64 → 35,72 0.01 ΔE 1.0 ΔRGB(-2,0,0) fill recolour ΔRGB(-2,+0,+0) (ΔE 1.0) AntialiasCoverage 194,46 → 199,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 27,61 → 31,68 0.01 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 225,49 → 229,58 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,76 → 366,83 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 221,58 0.01 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 57,60 → 57,72 0.01 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 195,76 → 199,87 0.009688 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 211,58 0.009559 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 24,60 → 28,72 0.009559 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 46,60 → 46,72 0.009559 ΔRGB(6,6,4) fill recolour ΔRGB(+6,+6,+4) (ΔE 0) AntialiasCoverage 207,75 → 207,87 0.009559 ΔRGB(8,6,7) antialiasing coverage residue on a shared outline AntialiasCoverage 371,75 → 371,87 0.009559 ΔRGB(8,7,4) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 192,58 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 46,78 → 67,78 0.008267 ΔE 0.4 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 25,78 → 45,78 0.008138 ΔE 0.4 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 222,45 → 227,51 0.007750 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 198,76 → 201,83 0.007750 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 375,81 → 378,85 0.007492 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 203,81 → 206,87 0.007105 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,52 → 217,56 0.006846 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 51,66 → 53,70 0.006717 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,75 → 364,82 0.006717 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,76 → 378,80 0.006200 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 201,75 → 204,81 0.006071 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 211,76 → 213,80 0.005942 ΔRGB(-1,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,75 → 367,80 0.005425 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 30,60 → 32,64 0.005167 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 62,68 → 65,72 0.004650 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 192,47 → 194,50 0.004134 antialiasing coverage residue on a shared outline AntialiasCoverage 367,81 → 369,84 0.004134 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 359,83 → 361,87 0.004134 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,48 → 217,51 0.004004 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline ColorValue 212,81 → 214,84 0.003746 ΔRGB(-2,-1,-1) fill recolour ΔRGB(-2,-1,-1) (ΔE 0) AntialiasCoverage 212,52 → 212,56 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 222,56 → 225,58 0.003617 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 50,61 → 53,63 0.003617 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 48,66 → 48,70 0.003617 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 209,85 0.003617 ΔRGB(8,9,7) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-filters f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.37% · raw 0.95% (9651 px) interactions-cartesian-filters-x-flexbox · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 1.4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for filters and flexbox: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (81 total; showing 64 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 81 9651 14,34 → 461,131 1115 total 1.2% · largest 0.1%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 401,58 → 461,107 0.1 ΔRGB(-1,-1,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 15,48 → 143,116 0.08 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,50 → 139,114 0.08 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 190,67 → 244,111 0.06 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,117 → 143,117 0.05 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 199,49 → 206,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 180,131 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 68,77 → 75,88 0.04 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 305,35 → 305,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 92,74 → 98,86 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 303,36 → 303,128 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 403,60 → 403,104 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 457,60 → 457,104 0.04 ΔRGB(13,11,9) antialiasing coverage residue on a shared outline AntialiasCoverage 14,48 → 14,115 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 143,50 → 143,117 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 424,68 → 429,80 0.02 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 222,81 → 227,92 0.02 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 83,74 → 88,86 0.02 antialiasing coverage residue on a shared outline AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,46 → 219,55 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 73,77 → 76,89 0.01 ΔRGB(-5,-6,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 204,49 → 207,61 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 212,81 → 217,93 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 63,74 → 68,86 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 209,83 → 213,89 0.01 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 60,76 → 64,82 0.01 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 194,46 → 199,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 411,69 → 415,76 0.01 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 414,68 → 419,80 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 225,49 → 229,58 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 221,58 0.01 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 90,74 → 90,86 0.01 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 211,58 0.009559 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 420,68 → 420,80 0.009559 ΔRGB(6,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 79,74 → 79,86 0.009559 ΔRGB(10,10,9) antialiasing coverage residue on a shared outline ColorValue 218,81 → 218,93 0.009559 ΔRGB(9,8,5) fill recolour ΔRGB(+9,+8,+5) (ΔE 0) AntialiasCoverage 188,46 → 192,58 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 222,45 → 227,51 0.007750 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 83,80 → 86,84 0.007234 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 424,74 → 427,78 0.006975 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 214,52 → 217,56 0.006846 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 206,86 → 209,93 0.006459 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 83,76 → 85,79 0.006200 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 222,83 → 225,86 0.005942 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 408,74 → 410,80 0.005425 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 69,87 → 72,89 0.005038 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 57,81 → 59,86 0.004263 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 192,47 → 194,50 0.004134 antialiasing coverage residue on a shared outline AntialiasCoverage 214,48 → 217,51 0.004004 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 208,81 → 210,85 0.003875 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 212,56 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 222,56 → 225,58 0.003617 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 422,74 → 422,78 0.003617 ΔRGB(6,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 59,77 → 60,81 0.003617 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 81,80 → 81,84 0.003617 ΔRGB(8,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 220,87 → 220,92 0.003617 ΔRGB(6,4,5) antialiasing coverage residue on a shared outline AntialiasCoverage 215,56 → 218,58 0.003488 ΔRGB(7,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 223,91 → 226,93 0.003488 ΔRGB(11,10,10) antialiasing coverage residue on a shared outline AntialiasCoverage 207,90 → 209,93 0.003229 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,47 → 212,51 0.003100 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 422,69 → 422,73 0.003100 ΔRGB(6,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 81,76 → 81,79 0.003100 ΔRGB(8,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 409,77 → 411,80 0.003100 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-flexbox.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x flexbox interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 .f-flexbox {display:flex;align-items:center;justify-content:space-around;gap:4px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-filters f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-flexbox"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.28% · raw 0.95% (9598 px) interactions-cartesian-filters-x-tables · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 1.2
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for filters and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (92 total; showing 64 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 92 9598 14,34 → 415,131 615 total 1.2% · largest 0.08%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 15,48 → 143,116 0.08 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 356,69 → 411,114 0.08 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,50 → 139,114 0.08 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 355,68 → 415,116 0.06 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 190,67 → 244,111 0.06 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,117 → 143,117 0.05 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 199,49 → 206,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 68,66 → 74,78 0.04 ΔRGB(8,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 180,131 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 305,35 → 305,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 41,69 → 48,80 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 303,36 → 303,128 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 14,48 → 14,115 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 143,50 → 143,117 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 357,117 → 414,117 0.02 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 355,68 → 356,117 0.02 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 415,69 → 415,116 0.02 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 220,81 → 225,93 0.02 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 59,66 → 64,78 0.02 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,78 → 383,87 0.02 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 66,66 → 67,78 0.02 ΔRGB(-31,-29,-24) antialiasing coverage residue on a shared outline AntialiasCoverage 214,46 → 219,55 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 46,69 → 50,81 0.01 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 204,49 → 207,61 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 36,66 → 41,78 0.01 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,79 → 369,85 0.01 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 194,46 → 199,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 201,81 → 205,93 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 225,49 → 229,58 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 221,58 0.01 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 211,58 0.009559 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline ColorValue 55,66 → 55,78 0.009559 ΔRGB(7,7,4) fill recolour ΔRGB(+7,+7,+4) (ΔE 0) AntialiasCoverage 30,67 → 34,78 0.009559 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 374,78 → 374,90 0.009559 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 216,81 → 216,93 0.009559 ΔRGB(7,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 192,58 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 222,45 → 227,51 0.007750 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 362,82 → 365,90 0.007363 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 205,83 → 208,88 0.007363 ΔRGB(1,1,0) fill recolour ΔRGB(+1,+1,+0) (ΔE 0) AntialiasCoverage 220,87 → 223,92 0.007363 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 59,72 → 62,76 0.007234 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 214,52 → 217,56 0.006846 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,84 → 381,88 0.006846 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 220,83 → 222,86 0.006200 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 59,68 → 62,71 0.005942 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 33,68 → 35,74 0.005684 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 43,79 → 46,81 0.005296 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 368,78 → 370,83 0.004650 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 207,81 → 209,86 0.004650 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 36,69 → 37,74 0.004521 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 192,47 → 194,50 0.004134 antialiasing coverage residue on a shared outline AntialiasCoverage 214,48 → 217,51 0.004004 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 209,87 → 211,90 0.003875 antialiasing coverage residue on a shared outline AntialiasCoverage 379,88 → 382,90 0.003746 ΔRGB(9,8,7) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 212,56 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 222,56 → 225,58 0.003617 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 57,72 → 57,76 0.003617 ΔRGB(5,5,4) antialiasing coverage residue on a shared outline AntialiasCoverage 370,84 → 372,87 0.003617 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,84 → 376,88 0.003617 ΔRGB(7,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 218,87 → 218,92 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 215,56 → 218,58 0.003488 ΔRGB(7,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 365,78 → 366,82 0.003359 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-tables.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x tables interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 .f-tables {display:table;border-collapse:separate;border-spacing:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-filters f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-tables"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.39% · raw 0.94% (9596 px) interactions-cartesian-filters-x-inline-text · same-element-and-bidirectional-nestingPASS via CSS-scale observation: predominant shared-outline coverage AntialiasCoverage ΔE 5.4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for filters and inline-text: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (74 total; showing 64 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 74 9596 14,34 → 412,131 615 total 1.2% · largest 0.08%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 15,48 → 143,116 0.08 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,50 → 139,114 0.08 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,77 → 212,89 0.07 ΔRGB(4,4,3) antialiasing coverage residue on a shared outline AntialiasCoverage 40,62 → 49,74 0.07 ΔRGB(4,4,3) antialiasing coverage residue on a shared outline ColorValue 51,61 → 59,74 0.06 ΔRGB(-5,-4,-4) fill recolour ΔRGB(-5,-4,-4) (ΔE 0) AntialiasCoverage 190,67 → 244,111 0.06 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,117 → 143,117 0.05 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline ColorValue 32,61 → 38,70 0.05 ΔRGB(-2,-2,-2) fill recolour ΔRGB(-2,-2,-2) (ΔE 0) AntialiasCoverage 352,65 → 412,113 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 199,49 → 206,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline ColorValue 24,59 → 32,68 0.04 ΔRGB(-2,-2,-2) fill recolour ΔRGB(-2,-2,-2) (ΔE 0) AntialiasCoverage 179,34 → 180,131 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 305,35 → 305,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 303,36 → 303,128 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 14,48 → 14,115 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 143,50 → 143,117 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline ColorValue 354,113 → 410,113 0.02 ΔRGB(-1,0,0) fill recolour ΔRGB(-1,+0,+0) (ΔE 0) AntialiasCoverage 195,74 → 202,83 0.02 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 354,111 → 407,111 0.02 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 412,67 → 412,113 0.02 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,48 → 377,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 381,51 → 387,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 214,46 → 219,55 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,76 → 380,85 0.01 ΔRGB(-3,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 381,52 → 386,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 204,49 → 207,61 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 359,76 → 364,88 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 194,46 → 199,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 225,49 → 229,58 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 221,58 0.01 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 370,54 → 375,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 211,58 0.009559 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 371,76 → 371,88 0.009559 ΔRGB(8,7,4) antialiasing coverage residue on a shared outline AntialiasCoverage 362,77 → 366,84 0.009559 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 370,49 → 375,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 192,58 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,76 → 368,84 0.008396 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 222,45 → 227,51 0.007750 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 375,82 → 378,86 0.007105 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 214,52 → 217,56 0.006846 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 375,77 → 378,81 0.006071 ΔRGB(-2,-2,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 192,47 → 194,50 0.004134 antialiasing coverage residue on a shared outline AntialiasCoverage 214,48 → 217,51 0.004004 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 212,56 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 222,56 → 225,58 0.003617 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 372,82 → 373,86 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 215,56 → 218,58 0.003488 ΔRGB(7,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 212,47 → 212,51 0.003100 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 372,77 → 373,81 0.003100 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 360,85 → 362,88 0.003100 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,86 → 379,88 0.003100 ΔRGB(14,12,10) antialiasing coverage residue on a shared outline AntialiasCoverage 196,55 → 197,58 0.002971 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,85 → 368,88 0.002842 ΔRGB(-2,-1,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 191,50 → 192,53 0.002713 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 194,51 → 195,53 0.002325 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 191,58 0.002325 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 200,80 → 202,83 0.002196 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,48 → 381,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 196,81 → 196,83 0.001550 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,85 → 369,86 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 216,48 0.001292 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 369,87 → 370,88 0.001163 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-inline-text.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x inline-text interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 .f-inline-text {line-height:1.35;word-spacing:5px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-filters f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.26% · raw 0.93% (9493 px) interactions-cartesian-block-box-model-x-filters · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 1.0
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for block-box-model and filters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (92 total; showing 64 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 92 9493 14,34 → 471,131 704 total 1.2% · largest 0.09%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 343,34 → 471,130 0.09 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 15,48 → 143,116 0.08 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,50 → 139,114 0.08 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,117 → 143,117 0.05 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 36,67 → 42,79 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 364,49 → 370,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline ColorValue 190,70 → 246,117 0.04 ΔRGB(0,1,0) fill recolour ΔRGB(+0,+1,+0) (ΔE 0) AntialiasCoverage 189,70 → 244,115 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 342,34 → 342,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 471,36 → 471,131 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 467,36 → 467,128 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 354,111 → 441,111 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 59,64 → 65,76 0.04 antialiasing coverage residue on a shared outline AntialiasCoverage 14,48 → 14,115 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 143,50 → 143,117 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 188,68 → 248,70 0.03 ΔRGB(0,-1,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 191,118 → 247,118 0.02 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 188,69 → 190,118 0.02 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 387,50 → 392,58 0.02 antialiasing coverage residue on a shared outline AntialiasCoverage 248,70 → 248,117 0.02 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 442,67 → 442,110 0.02 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 50,64 → 55,76 0.02 antialiasing coverage residue on a shared outline AntialiasCoverage 211,79 → 216,88 0.02 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 378,46 → 383,56 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 368,49 → 372,61 0.01 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 40,67 → 44,79 0.01 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 375,75 → 380,83 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 27,67 → 31,72 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 359,75 → 364,85 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,76 → 366,83 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 385,45 → 385,58 0.01 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 57,64 → 57,76 0.01 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 355,47 → 359,53 0.009688 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 195,79 → 199,91 0.009688 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 374,46 → 374,58 0.009559 ΔRGB(5,5,3) fill recolour ΔRGB(+5,+5,+3) (ΔE 0) ColorValue 46,64 → 46,76 0.009559 ΔRGB(7,7,4) fill recolour ΔRGB(+7,+7,+4) (ΔE 0) ColorValue 371,75 → 371,87 0.009559 ΔRGB(10,10,5) fill recolour ΔRGB(+10,+10,+5) (ΔE 0) AntialiasCoverage 207,79 → 207,91 0.009559 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 387,45 → 392,51 0.009430 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 352,46 → 356,58 0.009430 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 24,64 → 28,75 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 390,51 → 393,58 0.008267 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 198,80 → 201,86 0.008138 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 358,46 → 361,54 0.008009 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 50,70 → 53,75 0.007105 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 375,81 → 378,85 0.007105 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,52 → 381,56 0.006846 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 211,85 → 214,89 0.006846 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,77 → 368,84 0.006200 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 203,85 → 206,91 0.006200 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,47 → 381,51 0.006071 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 50,66 → 53,69 0.005942 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 375,76 → 378,80 0.005813 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 201,79 → 203,84 0.004909 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,84 → 380,87 0.004521 ΔRGB(4,4,3) antialiasing coverage residue on a shared outline AntialiasCoverage 32,68 → 33,73 0.004134 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 212,89 → 215,91 0.003746 ΔRGB(9,8,7) antialiasing coverage residue on a shared outline AntialiasCoverage 376,52 → 376,56 0.003617 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 30,64 → 32,68 0.003617 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 48,70 → 48,75 0.003617 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 372,81 → 373,85 0.003617 ΔRGB(7,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 209,85 → 209,89 0.003617 ΔRGB(7,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 379,56 → 382,58 0.003359 ΔRGB(8,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 376,47 → 376,51 0.003100 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-block-box-model-x-filters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>block-box-model x filters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-block-box-model {box-sizing:border-box;padding:11px 7px;min-width:92px;max-width:132px;}
61 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-block-box-model f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-block-box-model"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-block-box-model"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.29% · raw 0.92% (9328 px) interactions-cartesian-filters-x-typography · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 1.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for filters and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (78 total; showing 64 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 78 9328 14,34 → 412,131 615 total 1.2% · largest 0.08%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 15,48 → 143,116 0.08 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,50 → 139,114 0.08 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 190,67 → 244,111 0.06 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,117 → 143,117 0.05 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 352,65 → 412,113 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 199,49 → 206,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 180,131 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 305,35 → 305,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 303,36 → 303,128 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 50,60 → 60,74 0.04 ΔRGB(4,3,1) antialiasing coverage residue on a shared outline AntialiasCoverage 373,75 → 383,89 0.04 ΔRGB(4,4,1) antialiasing coverage residue on a shared outline AntialiasCoverage 209,75 → 219,89 0.03 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 14,48 → 14,115 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 143,50 → 143,117 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 37,63 → 45,76 0.02 ΔRGB(-3,-2,-2) antialiasing coverage residue on a shared outline ColorValue 354,113 → 410,113 0.02 ΔRGB(-1,0,0) fill recolour ΔRGB(-1,+0,+0) (ΔE 0) AntialiasCoverage 354,111 → 407,111 0.02 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 63,60 → 72,75 0.02 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 412,67 → 412,113 0.02 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 194,75 → 200,89 0.02 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 65,65 → 70,72 0.02 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 40,65 → 45,72 0.02 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 23,60 → 29,74 0.02 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,63 → 47,78 0.01 ΔRGB(-6,-6,-5) antialiasing coverage residue on a shared outline AntialiasCoverage 214,46 → 219,55 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,82 → 381,87 0.01 ΔRGB(-1,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,78 → 367,84 0.01 antialiasing coverage residue on a shared outline AntialiasCoverage 212,82 → 217,87 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 204,49 → 207,61 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 28,63 → 32,68 0.01 antialiasing coverage residue on a shared outline AntialiasCoverage 52,67 → 58,72 0.01 ΔRGB(-2,-1,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 194,46 → 199,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 68,63 → 73,72 0.01 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,84 → 372,89 0.01 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 359,75 → 364,87 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 225,49 → 229,58 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 212,77 → 216,80 0.01 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 375,77 → 380,80 0.01 ΔRGB(-4,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 221,58 0.01 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 32,69 → 36,74 0.009946 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 211,58 0.009559 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 192,58 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 366,75 → 369,83 0.008396 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 31,60 → 34,69 0.008267 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 199,80 → 203,84 0.007880 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 222,45 → 227,51 0.007750 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 202,76 → 205,84 0.007621 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,52 → 217,56 0.006846 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 214,75 → 219,79 0.006459 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 358,85 → 362,89 0.006200 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 38,75 → 41,78 0.005813 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,85 → 207,89 0.005555 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 52,62 → 55,65 0.004909 ΔRGB(-9,-7,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 200,78 → 202,81 0.004263 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 192,47 → 194,50 0.004134 antialiasing coverage residue on a shared outline AntialiasCoverage 214,48 → 217,51 0.004004 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 55,63 → 57,65 0.003875 ΔRGB(-4,-3,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 205,84 → 207,88 0.003746 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 212,56 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 222,56 → 225,58 0.003617 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 215,56 → 218,58 0.003488 ΔRGB(7,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 212,47 → 212,51 0.003100 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-typography.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x typography interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 .f-typography {font-size:18px;font-weight:700;letter-spacing:.7px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-filters f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-typography"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.88% · raw 0.89% (3327 px) interactions-cartesian-inline-text-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages PASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 37.0
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff why: page 2: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Physical-page-context interaction for page-margins and inline-text: the inline-text representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
regions (9 total; showing 9 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 9 3327 8,22 → 160,97 1425 total 0.9% · largest 0.4%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 8,96 → 160,97 0.4 ΔRGB(-129,-126,-76) antialiasing coverage residue on a shared outline AntialiasCoverage 10,94 → 158,95 0.4 ΔRGB(144,128,111) antialiasing coverage residue on a shared outline AntialiasCoverage 33,22 → 42,34 0.04 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 46,25 → 52,34 0.03 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 46,26 → 51,33 0.03 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 35,28 → 40,33 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 35,23 → 40,27 0.02 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 44,22 → 46,22 0.003200 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 44,34 → 46,34 0.001600 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-inline-text-x-page-margins.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>inline-text x page-margins interaction</title>
6 <style>
7 @page {
8 size: 192px 200px;
9 margin: 16px;
10 background: #ffd6d6;
11 }
12 @page :left { margin: 8px 32px 24px 8px; }
13 @page :right { margin: 16px 8px 8px 32px; }
14 @page :first { margin: 32px 8px 16px 24px; }
15
16 @font-face {
17 font-family: MatrixSans;
18 src: url('../../fonts/ParitySans.ttf') format('truetype');
19 font-style: normal;
20 font-weight: 400;
21 }
22 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
23 * { box-sizing: border-box; margin: 0; }
24 html, body { background: #ffffff; }
25 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
26 .stage {
27 display: inline-flex;
28 width: 156px;
29 min-height: 164px;
30 margin-right: 8px;
31 align-items: center;
32 justify-content: center;
33 background: #f7fafc;
34 border: 1px solid #cbd5e1;
35 font-size: 16px;
36 vertical-align: top;
37 }
38 .stage:last-child { margin-right: 0; }
39 .node {
40 width: 126px;
41 padding: 7px;
42 border: 2px solid #577590;
43 background-color: #e7f5ff;
44 color: #17324d;
45 }
46 .node.inner {
47 width: 58px;
48 height: 48px;
49 padding: 5px;
50 }
51 .node.outer { min-height: 96px; }
52 .own { height: 22px; white-space: nowrap; }
53 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
54 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
55 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
56 .f-images-replaced > .own > .asset { display: inline-block; }
57 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
58 .f-lists-counters > .own > .token { counter-increment: pair-item; }
59 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
60 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
61 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
62 @supports (display:grid) {
63 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
64 }
65 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
66
67 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
68 .stage { display: block; margin: 0; break-before: page; }
69 .stage > .node { min-height: 68px; margin: 47px auto 0; }
70 .stage > .node.outer { margin-top: 33px; }
71
72 /* The three compositions occupy first/right, left, and later-right pages.
73 Their asymmetric page areas expose side selection, cascade, content
74 origin, bottom capacity, and paint that crosses a page-area edge.
75 Horizontal body padding is a distinct root-flow gutter: each stage
76 deliberately shifts through it to the physical page-area start edge. */
77 body { padding-left: 8px; padding-right: 8px; }
78 .stage {
79 width: 152px;
80 height: 128px;
81 min-height: 128px;
82 margin-left: -8px;
83 border: 0;
84 background: #d8f3dc;
85 }
86 .node { width: 100%; }
87 .stage > .node,
88 .stage > .node.outer { margin: 0; }
89 .f-inline-text {line-height:1.35;word-spacing:5px;}
90 .f-page-margins {}
91 </style>
92 </head>
93 <body>
94 <div class="stage"><div class="node f-inline-text f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
95 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-page-margins"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
96 <div class="stage"><div class="node outer f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
97 </body>
98 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.27% · raw 0.86% (8763 px) interactions-cartesian-filters-x-positioning · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 1.2
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for filters and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (92 total; showing 64 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 92 8763 14,34 → 412,131 615 total 1.1% · largest 0.08%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 15,48 → 143,116 0.08 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,50 → 139,114 0.08 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 190,67 → 244,111 0.06 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,117 → 143,117 0.05 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 352,65 → 412,113 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 199,49 → 206,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 180,131 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 127,93 → 134,106 0.04 ΔRGB(-3,-3,-3) fill recolour ΔRGB(-3,-3,-3) (ΔE 0) AntialiasCoverage 305,35 → 305,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 303,36 → 303,128 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 36,63 → 42,75 0.04 antialiasing coverage residue on a shared outline AntialiasCoverage 14,48 → 14,115 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 143,50 → 143,117 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline ColorValue 354,113 → 410,113 0.02 ΔRGB(-1,0,0) fill recolour ΔRGB(-1,+0,+0) (ΔE 0) AntialiasCoverage 354,111 → 407,111 0.02 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 412,67 → 412,113 0.02 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 119,94 → 124,106 0.02 antialiasing coverage residue on a shared outline AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,46 → 219,55 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 234,91 → 239,100 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 375,75 → 380,84 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 204,49 → 207,61 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 40,63 → 44,75 0.01 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 194,46 → 199,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 27,61 → 31,68 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 225,49 → 229,58 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,77 → 366,83 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 221,58 0.01 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 126,93 → 126,106 0.01 ΔRGB(13,12,11) antialiasing coverage residue on a shared outline AntialiasCoverage 195,76 → 199,87 0.009688 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 211,58 0.009559 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 24,60 → 28,72 0.009559 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,75 → 371,87 0.009559 ΔRGB(8,7,4) antialiasing coverage residue on a shared outline AntialiasCoverage 230,91 → 230,103 0.009559 ΔRGB(8,8,7) antialiasing coverage residue on a shared outline AntialiasCoverage 115,94 → 115,106 0.009559 ΔRGB(6,5,4) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 192,58 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,75 → 368,84 0.008655 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 198,76 → 201,83 0.008138 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 30,60 → 33,68 0.008009 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 222,45 → 227,51 0.007750 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 234,97 → 237,101 0.007363 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 375,81 → 378,85 0.007105 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 119,100 → 122,104 0.006975 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 214,52 → 217,56 0.006846 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,75 → 364,82 0.006717 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 234,92 → 236,96 0.006200 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 119,95 → 121,99 0.006200 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,76 → 378,80 0.006071 ΔRGB(-3,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 203,81 → 206,87 0.005296 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 37,64 → 39,69 0.005167 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 192,47 → 194,50 0.004134 antialiasing coverage residue on a shared outline AntialiasCoverage 359,83 → 361,87 0.004134 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,48 → 217,51 0.004004 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 235,100 → 238,103 0.004004 ΔRGB(5,5,3) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 212,56 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 222,56 → 225,58 0.003617 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 202,77 → 203,81 0.003617 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 372,81 → 373,85 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 376,85 → 379,87 0.003617 ΔRGB(11,10,9) antialiasing coverage residue on a shared outline AntialiasCoverage 232,97 → 232,101 0.003617 ΔRGB(7,7,6) antialiasing coverage residue on a shared outline AntialiasCoverage 116,100 → 117,104 0.003617 ΔRGB(4,4,3) antialiasing coverage residue on a shared outline AntialiasCoverage 215,56 → 218,58 0.003488 ΔRGB(7,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 212,47 → 212,51 0.003100 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-positioning.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x positioning interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 .f-positioning {position:relative;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-filters f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-positioning"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.26% · raw 0.84% (8547 px) interactions-cartesian-filters-x-grid · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 1.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for filters and grid: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (87 total; showing 64 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 87 8547 14,34 → 462,131 615 total 1.1% · largest 0.08%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 15,48 → 143,116 0.08 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,50 → 139,114 0.08 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 190,67 → 244,111 0.06 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 305,34 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,117 → 143,117 0.05 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 402,58 → 462,107 0.05 ΔRGB(-1,-1,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 199,49 → 206,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 36,77 → 42,89 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 179,34 → 180,131 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 305,35 → 305,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 303,36 → 303,128 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 59,74 → 65,86 0.04 antialiasing coverage residue on a shared outline AntialiasCoverage 14,48 → 14,115 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 143,50 → 143,117 0.03 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 211,81 → 216,91 0.02 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 462,60 → 462,107 0.02 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 458,60 → 458,104 0.02 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 50,74 → 55,86 0.02 antialiasing coverage residue on a shared outline AntialiasCoverage 222,50 → 228,57 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,46 → 219,55 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 425,68 → 429,78 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 204,49 → 207,61 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 40,77 → 44,89 0.01 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 412,69 → 416,76 0.01 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 194,46 → 199,58 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 225,49 → 229,58 0.01 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 221,45 → 221,58 0.01 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 57,74 → 57,86 0.01 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 198,83 → 203,89 0.01 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 27,76 → 31,82 0.009688 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 211,58 0.009559 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 421,68 → 421,80 0.009559 ΔRGB(6,5,4) antialiasing coverage residue on a shared outline ColorValue 46,74 → 46,86 0.009559 ΔRGB(10,9,5) fill recolour ΔRGB(+10,+9,+5) (ΔE 0) AntialiasCoverage 207,81 → 207,93 0.009559 ΔRGB(7,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 195,82 → 199,93 0.009559 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 192,58 0.008913 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 30,74 → 33,83 0.008138 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 25,74 → 28,83 0.008009 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 222,45 → 227,51 0.007750 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 409,72 → 412,80 0.007363 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,52 → 217,56 0.006846 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 425,74 → 428,78 0.006846 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 50,80 → 53,84 0.006846 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 211,87 → 214,92 0.006846 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 425,69 → 428,73 0.006330 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 50,76 → 53,79 0.006071 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 203,87 → 206,93 0.005425 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 415,68 → 417,73 0.004650 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 192,47 → 194,50 0.004134 antialiasing coverage residue on a shared outline AntialiasCoverage 214,48 → 217,51 0.004004 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,91 → 215,93 0.003746 ΔRGB(9,8,6) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 212,56 0.003617 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 222,56 → 225,58 0.003617 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 417,74 → 419,77 0.003617 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 423,74 → 423,78 0.003617 ΔRGB(8,8,4) antialiasing coverage residue on a shared outline AntialiasCoverage 48,80 → 48,84 0.003617 ΔRGB(7,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 209,87 → 209,92 0.003617 ΔRGB(7,7,6) antialiasing coverage residue on a shared outline AntialiasCoverage 215,56 → 218,58 0.003488 ΔRGB(7,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 426,78 → 429,80 0.003488 ΔRGB(9,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 412,68 → 413,72 0.003359 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 202,83 → 203,87 0.003229 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 212,47 → 212,51 0.003100 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 423,69 → 423,73 0.003100 ΔRGB(8,8,4) antialiasing coverage residue on a shared outline AntialiasCoverage 48,76 → 48,79 0.003100 ΔRGB(5,5,4) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-filters-x-grid.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>filters x grid interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
61 .f-grid {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-filters f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-grid"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.31% · raw 0.83% (8391 px) interactions-cartesian-clip-mask-x-filters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage extra 0.001585% ΔE 0.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and filters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (117 total; showing 64 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 116 8386 21,34 → 471,131 704 total 1.1% · largest 0.09% · max ΔE 1.0 Extra 1 5 141,53 → 141,55 5 total 0.000646% · largest 0.000646%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 343,34 → 471,130 0.09 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 188,65 → 248,114 0.08 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 36,63 → 44,75 0.06 antialiasing coverage residue on a shared outline AntialiasCoverage 57,60 → 65,72 0.05 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,49 → 370,61 0.04 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 190,67 → 244,111 0.04 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 342,34 → 342,130 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 471,36 → 471,131 0.04 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 467,36 → 467,128 0.04 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 46,60 → 55,72 0.03 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 24,60 → 35,72 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 354,65 → 386,67 0.03 ΔE 0.7 ΔRGB(-7,-7,-6) fill recolour ΔRGB(-7,-7,-6) (ΔE 0.7) ColorValue 384,110 → 406,113 0.03 ΔE 0.6 ΔRGB(4,3,2) fill recolour ΔRGB(+4,+3,+2) (ΔE 0.6) AntialiasCoverage 100,114 → 133,114 0.03 ΔE 0.4 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline ColorValue 190,113 → 245,113 0.02 ΔRGB(-1,0,0) fill recolour ΔRGB(-1,+0,+0) (ΔE 0) AntialiasCoverage 387,50 → 392,58 0.02 antialiasing coverage residue on a shared outline ColorValue 352,83 → 354,107 0.02 fill colour differs (ΔE 0) AntialiasCoverage 211,75 → 216,84 0.02 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline ColorValue 21,50 → 60,50 0.02 ΔRGB(0,0,1) fill recolour ΔRGB(+0,+0,+1) (ΔE 0) AntialiasCoverage 139,53 → 139,73 0.02 ΔE 0.8 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 408,69 → 410,86 0.01 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,46 → 383,56 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 27,61 → 31,68 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 48,66 → 53,70 0.01 ΔRGB(2,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,49 → 372,61 0.01 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 375,75 → 380,83 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 48,61 → 53,65 0.01 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 359,75 → 364,85 0.01 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,76 → 366,83 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 385,45 → 385,58 0.01 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 355,47 → 359,53 0.009688 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 195,76 → 199,87 0.009688 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline ColorValue 374,46 → 374,58 0.009559 ΔRGB(5,5,3) fill recolour ΔRGB(+5,+5,+3) (ΔE 0) AntialiasCoverage 207,75 → 207,87 0.009559 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline ColorValue 371,75 → 371,87 0.009559 ΔRGB(10,10,5) fill recolour ΔRGB(+10,+10,+5) (ΔE 0) AntialiasCoverage 387,45 → 392,51 0.009430 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 352,46 → 356,58 0.009430 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 390,51 → 393,58 0.008267 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 198,76 → 201,83 0.008138 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 358,46 → 361,54 0.008009 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,81 → 378,85 0.007105 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,52 → 381,56 0.006846 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline ColorValue 353,73 → 354,83 0.006846 ΔE 0.5 fill colour differs (ΔE 0.5) AntialiasCoverage 211,81 → 214,85 0.006846 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,77 → 368,84 0.006200 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 203,81 → 206,87 0.006200 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,47 → 381,51 0.006071 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 375,76 → 378,80 0.005813 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 201,75 → 203,80 0.004909 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,84 → 380,87 0.004521 ΔRGB(4,4,3) antialiasing coverage residue on a shared outline ColorValue 407,89 → 408,94 0.004521 ΔE 1.0 ΔRGB(2,2,0) fill recolour ΔRGB(+2,+2,+0) (ΔE 1.0) AntialiasCoverage 212,85 → 215,87 0.003746 ΔRGB(9,8,7) antialiasing coverage residue on a shared outline AntialiasCoverage 376,52 → 376,56 0.003617 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 209,85 0.003617 ΔRGB(7,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 372,81 → 373,85 0.003617 ΔRGB(7,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 379,56 → 382,58 0.003359 ΔRGB(8,7,7) antialiasing coverage residue on a shared outline AntialiasCoverage 376,47 → 376,51 0.003100 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 209,76 → 209,80 0.003100 ΔRGB(7,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 372,76 → 373,80 0.003100 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 196,84 → 198,87 0.003100 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 367,84 → 368,87 0.003100 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 353,55 → 355,58 0.002971 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 361,55 → 363,58 0.002971 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 211,76 → 213,78 0.002971 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-filters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x filters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-filters {filter:grayscale(.18) contrast(1.08) drop-shadow(2px 1px 0 #90a4ae);}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-filters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-filters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.43% · raw 0.43% (1628 px) interactions-cartesian-backgrounds-borders-x-paged-media · same-element-and-bidirectional-nesting · 4 pages PASS via CSS-scale observation: sub-CSS shared-outline coverage Extra extra 0.5% ΔE 10.7
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff why: page 2: visually accepted coverage phase; raw candidate adds paint absent from reference (0.5%)
Cartesian family interaction for backgrounds-borders and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (89 total; showing 64 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 87 658 15,34 → 141,200 486 total 0.2% · largest 0.2% Extra 2 970 15,44 → 141,200 486 total 0.3% · largest 0.2%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason Extra 141,44 → 141,200 0.2 candidate adds paint absent from reference (0.2%) AntialiasCoverage 139,44 → 139,200 0.2 ΔRGB(59,56,51) antialiasing coverage residue on a shared outline Extra 15,45 → 15,200 0.2 candidate adds paint absent from reference (0.2%) AntialiasCoverage 136,36 → 138,38 0.004271 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 24,34 → 27,34 0.002957 ΔRGB(-6,-3,1) antialiasing coverage residue on a shared outline AntialiasCoverage 129,34 → 131,34 0.002628 ΔRGB(-6,-3,1) antialiasing coverage residue on a shared outline AntialiasCoverage 19,36 → 20,36 0.001971 ΔRGB(-3,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 16,40 → 16,42 0.001971 ΔRGB(-3,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 15,43 → 15,44 0.001643 ΔRGB(-4,-3,1) antialiasing coverage residue on a shared outline AntialiasCoverage 132,34 → 132,34 0.001314 ΔRGB(-3,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 135,36 → 136,36 0.001314 ΔRGB(-3,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 17,38 → 17,39 0.001314 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 16,39 → 17,40 0.001314 ΔRGB(-3,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 139,40 → 140,40 0.001314 ΔRGB(-3,-2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 140,42 → 140,43 0.001314 ΔRGB(-4,-3,0) antialiasing coverage residue on a shared outline AntialiasCoverage 23,34 → 24,34 0.000986 ΔRGB(-5,-3,0) antialiasing coverage residue on a shared outline AntialiasCoverage 22,35 → 23,35 0.000986 ΔRGB(-3,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 133,35 → 133,35 0.000986 ΔRGB(-5,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 18,37 → 19,37 0.000986 ΔRGB(-6,-3,1) antialiasing coverage residue on a shared outline AntialiasCoverage 140,41 → 140,41 0.000986 ΔRGB(-3,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 15,42 → 15,43 0.000986 ΔRGB(-5,-3,0) antialiasing coverage residue on a shared outline AntialiasCoverage 22,35 → 22,35 0.000657 ΔRGB(-4,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 129,35 → 130,35 0.000657 ΔRGB(26,24,23) antialiasing coverage residue on a shared outline AntialiasCoverage 134,35 → 134,35 0.000657 ΔRGB(-2,-1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 21,35 → 21,35 0.000657 ΔRGB(-4,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 134,35 → 135,35 0.000657 ΔRGB(-2,-1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 20,36 → 21,36 0.000657 ΔRGB(-3,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 21,36 → 21,36 0.000657 ΔRGB(15,14,13) antialiasing coverage residue on a shared outline AntialiasCoverage 138,39 → 138,39 0.000657 ΔRGB(15,14,13) antialiasing coverage residue on a shared outline AntialiasCoverage 139,39 → 139,39 0.000657 ΔRGB(6,7,6) antialiasing coverage residue on a shared outline AntialiasCoverage 135,39 → 135,39 0.000657 ΔRGB(15,14,13) antialiasing coverage residue on a shared outline AntialiasCoverage 139,41 → 139,41 0.000657 ΔRGB(28,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 17,41 → 17,41 0.000657 ΔRGB(14,13,11) antialiasing coverage residue on a shared outline AntialiasCoverage 140,42 → 140,42 0.000657 ΔRGB(-6,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 140,43 → 140,44 0.000657 ΔRGB(14,13,12) antialiasing coverage residue on a shared outline AntialiasCoverage 141,44 → 141,44 0.000657 ΔRGB(-4,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 25,35 → 25,35 0.000329 ΔRGB(-15,-14,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 26,35 → 26,35 0.000329 ΔRGB(36,34,31) antialiasing coverage residue on a shared outline AntialiasCoverage 130,35 → 130,35 0.000329 ΔRGB(-14,-13,-11) antialiasing coverage residue on a shared outline AntialiasCoverage 24,35 → 24,35 0.000329 ΔRGB(-15,-14,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 25,35 → 25,35 0.000329 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 131,35 → 131,35 0.000329 ΔRGB(6,7,5) antialiasing coverage residue on a shared outline AntialiasCoverage 132,35 → 132,35 0.000329 ΔRGB(-14,-14,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 23,36 → 23,36 0.000329 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 133,36 → 133,36 0.000329 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 134,36 → 134,36 0.000329 ΔRGB(14,13,11) antialiasing coverage residue on a shared outline AntialiasCoverage 136,36 → 136,36 0.000329 ΔRGB(-6,-4,1) antialiasing coverage residue on a shared outline AntialiasCoverage 134,36 → 134,36 0.000329 ΔRGB(9,9,8) antialiasing coverage residue on a shared outline AntialiasCoverage 19,37 → 19,37 0.000329 ΔRGB(-6,-4,1) antialiasing coverage residue on a shared outline AntialiasCoverage 20,37 → 20,37 0.000329 ΔRGB(15,14,12) antialiasing coverage residue on a shared outline AntialiasCoverage 135,37 → 135,37 0.000329 ΔRGB(12,12,10) antialiasing coverage residue on a shared outline AntialiasCoverage 20,37 → 20,37 0.000329 ΔRGB(14,13,12) antialiasing coverage residue on a shared outline AntialiasCoverage 135,37 → 135,37 0.000329 ΔRGB(9,9,8) antialiasing coverage residue on a shared outline AntialiasCoverage 20,37 → 20,37 0.000329 ΔRGB(10,10,9) antialiasing coverage residue on a shared outline AntialiasCoverage 136,37 → 136,37 0.000329 ΔRGB(6,7,5) antialiasing coverage residue on a shared outline AntialiasCoverage 18,38 → 18,38 0.000329 ΔRGB(-7,-4,1) antialiasing coverage residue on a shared outline ColorValue 19,38 → 19,38 0.000329 ΔRGB(4,3,3) fill recolour ΔRGB(+4,+3,+3) (ΔE 0) ColorValue 137,38 → 137,38 0.000329 ΔRGB(14,14,13) fill recolour ΔRGB(+14,+14,+13) (ΔE 0) AntialiasCoverage 18,38 → 18,38 0.000329 ΔRGB(-6,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 19,38 → 19,38 0.000329 ΔRGB(11,10,9) antialiasing coverage residue on a shared outline AntialiasCoverage 137,38 → 137,38 0.000329 ΔRGB(17,16,14) antialiasing coverage residue on a shared outline AntialiasCoverage 19,39 → 19,39 0.000329 ΔRGB(10,9,8) antialiasing coverage residue on a shared outline AntialiasCoverage 20,39 → 20,39 0.000329 ΔRGB(10,10,9) antialiasing coverage residue on a shared outline AntialiasCoverage 136,39 → 136,39 0.000329 ΔRGB(8,7,6) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-paged-media.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x paged-media interaction</title>
6 <style>
7 @page { size: 192px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 min-height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 padding: 7px;
35 border: 2px solid #577590;
36 background-color: #e7f5ff;
37 color: #17324d;
38 }
39 .node.inner {
40 width: 58px;
41 height: 48px;
42 padding: 5px;
43 }
44 .node.outer { min-height: 96px; }
45 .own { height: 22px; white-space: nowrap; }
46 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
47 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
48 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
49 .f-images-replaced > .own > .asset { display: inline-block; }
50 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
51 .f-lists-counters > .own > .token { counter-increment: pair-item; }
52 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
53 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
54 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
55 @supports (display:grid) {
56 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
57 }
58 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
59
60 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
61 .stage { display: block; margin: 0; break-before: page; }
62 .stage > .node { min-height: 68px; margin: 47px auto 0; }
63 .stage > .node.outer { margin-top: 33px; }
64 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
65 .f-paged-media {break-before:page;break-inside:avoid;}
66 </style>
67 </head>
68 <body>
69 <div class="stage"><div class="node f-backgrounds-borders f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
70 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-paged-media"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
71 <div class="stage"><div class="node outer f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
72 </body>
73 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.37% · raw 0.43% (4379 px) interactions-cartesian-fonts-advanced-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.05% extra 0.03% ΔE 1.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for fonts-advanced and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (374 total; showing 64 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 251 4116 24,46 → 395,93 281 total 0.5% · largest 0.04% · max ΔE 4.2 Missing 80 169 35,61 → 382,93 28 total 0.02% · largest 0.003617% Extra 43 94 33,61 → 395,87 32 total 0.01% · largest 0.004134%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 25,76 → 67,78 0.04 ΔE 1.6 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 199,49 → 211,61 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,91 → 382,93 0.02 ΔE 1.6 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 196,91 → 218,93 0.02 ΔE 1.6 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 223,46 → 231,58 0.02 ΔRGB(35,32,30) antialiasing coverage residue on a shared outline AntialiasCoverage 224,50 → 230,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 60,64 → 66,70 0.01 ΔE 1.1 ΔRGB(-4,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 202,50 → 208,57 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 24,60 → 33,71 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 359,75 → 368,86 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 28,61 → 33,67 0.009946 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 221,46 → 226,58 0.009817 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 63,61 → 68,73 0.009688 ΔE 1.1 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 215,46 → 222,58 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 46,60 → 51,71 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 196,58 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 195,75 → 204,86 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 207,75 → 212,86 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 57,60 → 62,71 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 220,51 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 215,58 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 43,64 → 48,75 0.006588 ΔE 1.3 ΔRGB(-4,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 193,48 → 197,53 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 62,67 → 67,72 0.006071 ΔRGB(6,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 215,79 → 219,83 0.005555 ΔE 1.6 ΔRGB(15,14,13) antialiasing coverage residue on a shared outline AntialiasCoverage 39,64 → 44,70 0.005425 ΔE 0.9 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 201,77 → 204,82 0.005296 ΔE 1.3 ΔRGB(-6,-3,0) antialiasing coverage residue on a shared outline AntialiasCoverage 34,60 → 35,71 0.005167 ΔRGB(114,101,87) antialiasing coverage residue on a shared outline AntialiasCoverage 369,75 → 370,86 0.005167 ΔRGB(114,101,87) antialiasing coverage residue on a shared outline AntialiasCoverage 198,46 → 199,58 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 205,75 → 206,86 0.005038 ΔRGB(58,51,44) antialiasing coverage residue on a shared outline ColorValue 367,76 → 368,82 0.005038 ΔRGB(-76,-70,-63) fill recolour ΔRGB(-76,-70,-63) (ΔE 0) AntialiasCoverage 50,61 → 56,65 0.004909 ΔRGB(-23,-21,-19) antialiasing coverage residue on a shared outline AntialiasCoverage 211,76 → 217,80 0.004909 ΔRGB(-9,-8,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 370,78 → 371,87 0.004263 ΔE 1.8 ΔRGB(-6,-3,0) antialiasing coverage residue on a shared outline Extra 370,76 → 370,86 0.004134 candidate adds paint absent from reference (0.004134%) AntialiasCoverage 215,52 → 219,56 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 54,63 → 57,68 0.004134 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 41,71 → 44,75 0.003875 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 212,81 → 215,85 0.003875 ΔRGB(-37,-34,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 51,69 → 56,71 0.003746 ΔRGB(41,38,35) antialiasing coverage residue on a shared outline Missing 35,63 → 35,71 0.003617 candidate lacks paint present in reference (0.003617%) Missing 370,78 → 370,86 0.003617 candidate lacks paint present in reference (0.003617%) AntialiasCoverage 206,76 → 206,84 0.003488 ΔE 1.8 ΔRGB(-6,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 51,67 → 54,70 0.003359 ΔRGB(-65,-57,-50) antialiasing coverage residue on a shared outline AntialiasCoverage 54,60 → 58,63 0.003229 ΔRGB(30,28,26) antialiasing coverage residue on a shared outline AntialiasCoverage 51,61 → 55,63 0.002842 ΔRGB(17,16,15) antialiasing coverage residue on a shared outline AntialiasCoverage 25,68 → 28,71 0.002842 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 215,75 → 219,78 0.002842 ΔRGB(23,22,19) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 214,56 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 59,70 → 61,73 0.002583 ΔE 1.7 ΔRGB(-5,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,86 0.002325 ΔRGB(-71,-67,-61) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 192,58 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 33,68 → 33,71 0.002196 ΔRGB(-84,-79,-72) antialiasing coverage residue on a shared outline AntialiasCoverage 197,84 → 200,87 0.002196 ΔE 1.0 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 48,67 → 49,70 0.001938 ΔRGB(92,86,78) antialiasing coverage residue on a shared outline AntialiasCoverage 200,80 → 201,82 0.001808 ΔRGB(32,29,25) antialiasing coverage residue on a shared outline AntialiasCoverage 364,80 → 365,82 0.001808 ΔRGB(58,54,48) antialiasing coverage residue on a shared outline AntialiasCoverage 212,76 → 216,76 0.001679 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 213,86 → 216,87 0.001679 ΔE 0.6 ΔRGB(-2,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 61,62 → 62,64 0.001550 ΔRGB(25,23,21) antialiasing coverage residue on a shared outline AntialiasCoverage 39,65 → 41,67 0.001550 ΔRGB(3,2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 380,76 0.001550 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-fonts-advanced f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.34% · raw 0.38% (3833 px) interactions-cartesian-fonts-advanced-x-lists-counters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 14.9
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for fonts-advanced and lists-counters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (125 total; showing 64 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 125 3833 26,46 → 382,86 262 total 0.5% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 51,63 → 62,75 0.03 ΔRGB(13,13,11) antialiasing coverage residue on a shared outline AntialiasCoverage 199,49 → 211,61 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 61,60 → 72,71 0.02 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 223,46 → 231,58 0.02 ΔRGB(35,32,30) antialiasing coverage residue on a shared outline AntialiasCoverage 89,60 → 98,72 0.02 ΔRGB(35,32,30) antialiasing coverage residue on a shared outline AntialiasCoverage 242,75 → 249,86 0.01 ΔRGB(40,38,35) antialiasing coverage residue on a shared outline AntialiasCoverage 224,50 → 230,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 90,64 → 96,70 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 202,50 → 208,57 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 52,63 → 60,71 0.01 ΔRGB(-34,-32,-29) antialiasing coverage residue on a shared outline AntialiasCoverage 28,60 → 33,70 0.01 ΔRGB(-3,-37,-39) antialiasing coverage residue on a shared outline AntialiasCoverage 39,60 → 48,71 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 237,75 → 242,86 0.01 ΔRGB(-93,-87,-80) antialiasing coverage residue on a shared outline AntialiasCoverage 359,75 → 368,86 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 44,61 → 48,67 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 368,82 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 221,46 → 226,58 0.009817 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 88,60 → 92,71 0.009817 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 225,75 → 233,85 0.009559 ΔRGB(2,23,24) antialiasing coverage residue on a shared outline AntialiasCoverage 215,46 → 222,58 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 81,60 → 88,71 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 242,76 → 247,80 0.009430 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 50,60 → 50,71 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 369,75 → 370,86 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 196,58 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 30,60 → 34,70 0.008526 ΔRGB(6,71,75) antialiasing coverage residue on a shared outline AntialiasCoverage 222,76 → 231,86 0.008396 ΔRGB(-2,-23,-24) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 220,51 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 81,61 → 86,65 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 215,58 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 77,60 → 81,71 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 193,48 → 197,53 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 201,75 → 205,85 0.006200 ΔRGB(3,38,40) antialiasing coverage residue on a shared outline AntialiasCoverage 200,76 → 203,85 0.005813 ΔRGB(-3,-36,-37) antialiasing coverage residue on a shared outline AntialiasCoverage 242,81 → 246,85 0.005167 ΔRGB(-22,-23,-23) antialiasing coverage residue on a shared outline AntialiasCoverage 198,46 → 199,58 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 226,75 → 229,77 0.004263 ΔRGB(-1,-7,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 215,52 → 219,56 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 82,66 → 85,70 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 240,81 → 242,85 0.003875 ΔRGB(93,87,79) antialiasing coverage residue on a shared outline AntialiasCoverage 200,75 → 204,77 0.002971 ΔRGB(-1,-10,-11) antialiasing coverage residue on a shared outline AntialiasCoverage 219,77 → 219,82 0.002842 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 41,68 → 43,71 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 363,86 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 214,56 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 79,66 → 81,70 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 48,68 → 48,71 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,86 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 192,58 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 221,82 → 221,86 0.002067 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 221,75 → 221,79 0.001938 ΔRGB(-2,-1,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 36,69 → 36,71 0.001808 ΔRGB(-4,-55,-58) antialiasing coverage residue on a shared outline AntialiasCoverage 37,69 → 38,71 0.001808 ΔRGB(5,65,68) antialiasing coverage residue on a shared outline AntialiasCoverage 74,69 → 75,71 0.001679 ΔRGB(4,45,47) antialiasing coverage residue on a shared outline AntialiasCoverage 72,69 → 73,71 0.001550 ΔRGB(-2,-24,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 380,76 0.001550 ΔRGB(4,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 376,80 → 379,80 0.001421 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 215,80 → 216,82 0.001421 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 197,55 → 197,58 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 26,70 → 26,71 0.001292 ΔRGB(-3,-46,-48) antialiasing coverage residue on a shared outline AntialiasCoverage 380,76 → 381,78 0.001292 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 374,82 → 374,84 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 32,70 → 33,71 0.001163 ΔRGB(4,51,53) antialiasing coverage residue on a shared outline AntialiasCoverage 219,84 → 219,86 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-lists-counters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x lists-counters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
61 .f-lists-counters {counter-reset:pair-item;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-fonts-advanced f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.33% · raw 0.37% (3724 px) interactions-cartesian-fonts-advanced-x-fonts-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 14.4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for fonts-advanced and fonts-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (149 total; showing 64 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 149 3724 24,46 → 395,86 230 total 0.5% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 199,49 → 211,61 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 223,46 → 231,58 0.02 ΔRGB(35,32,30) antialiasing coverage residue on a shared outline AntialiasCoverage 224,50 → 230,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 379,46 → 386,58 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 51,60 → 58,71 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 202,50 → 208,57 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 212,75 → 219,86 0.01 ΔRGB(38,36,32) antialiasing coverage residue on a shared outline AntialiasCoverage 352,46 → 361,58 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 24,60 → 33,71 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 359,75 → 368,86 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 388,50 → 394,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 60,64 → 66,70 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 356,48 → 361,53 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 28,61 → 33,67 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 368,82 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 221,46 → 226,58 0.009817 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 374,46 → 379,58 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 215,46 → 222,58 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 46,60 → 51,71 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 362,46 → 363,58 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 34,60 → 35,71 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 369,75 → 370,86 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 378,47 → 384,51 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 50,61 → 56,65 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 196,58 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 195,75 → 204,86 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 207,75 → 212,86 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 390,49 → 395,58 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 62,63 → 67,72 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 211,76 → 217,80 0.007880 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 385,46 → 390,58 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 57,60 → 62,71 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 220,51 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 215,58 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 193,48 → 197,53 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 200,77 → 204,82 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 198,46 → 199,58 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 205,75 → 206,86 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 379,52 → 382,56 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 51,66 → 54,70 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 212,81 → 215,85 0.004392 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 215,52 → 219,56 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 376,52 → 378,56 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 48,66 → 50,70 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 389,46 → 391,50 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 61,60 → 63,64 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 211,85 0.003100 ΔRGB(69,65,59) antialiasing coverage residue on a shared outline AntialiasCoverage 353,55 → 356,58 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 25,68 → 28,71 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 363,86 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 214,56 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 361,55 → 361,58 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 33,68 → 33,71 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,86 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 192,58 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 196,84 → 199,86 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 387,57 → 389,58 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 59,70 → 61,72 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 364,60 → 366,61 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 36,74 → 38,75 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 380,76 0.001550 ΔRGB(4,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 372,49 → 373,50 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,63 → 45,64 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,80 → 379,80 0.001421 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-fonts-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x fonts-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
61 </style>
62 </head>
63 <body>
64 <div class="stage"><div class="node f-fonts-advanced f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
65 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
66 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 </body>
68 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.34% · raw 0.36% (3668 px) interactions-cartesian-fonts-advanced-x-inline-text · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 20.2
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for fonts-advanced and inline-text: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (77 total; showing 64 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 77 3668 24,46 → 387,89 396 total 0.5% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 51,62 → 61,74 0.05 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 199,49 → 211,61 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 40,62 → 52,74 0.03 ΔRGB(-9,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 204,77 → 215,89 0.03 ΔRGB(-14,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 368,48 → 377,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 33,61 → 38,69 0.02 ΔRGB(-18,-17,-16) antialiasing coverage residue on a shared outline AntialiasCoverage 223,46 → 231,58 0.02 ΔRGB(35,32,30) antialiasing coverage residue on a shared outline AntialiasCoverage 381,51 → 387,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 224,50 → 230,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 43,68 → 49,73 0.01 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 381,52 → 386,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 206,83 → 212,88 0.01 ΔRGB(7,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 202,50 → 208,57 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 44,63 → 50,67 0.01 ΔRGB(9,9,8) antialiasing coverage residue on a shared outline AntialiasCoverage 359,76 → 368,87 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 208,78 → 214,82 0.01 ΔRGB(7,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 364,77 → 368,83 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 370,54 → 375,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 221,46 → 226,58 0.009817 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 215,46 → 222,58 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 370,49 → 375,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 369,76 → 370,87 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 196,58 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 24,59 → 30,68 0.007880 ΔRGB(-68,-64,-58) antialiasing coverage residue on a shared outline AntialiasCoverage 33,61 → 40,70 0.007750 ΔRGB(39,36,33) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 220,51 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 27,60 → 30,65 0.007105 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 215,58 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 193,48 → 197,53 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 195,74 → 201,83 0.006200 ΔRGB(-28,-26,-24) antialiasing coverage residue on a shared outline AntialiasCoverage 198,46 → 199,58 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 31,59 → 32,68 0.005038 ΔRGB(147,138,126) antialiasing coverage residue on a shared outline AntialiasCoverage 202,74 → 203,83 0.004521 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 198,76 → 201,80 0.004521 ΔRGB(11,10,9) antialiasing coverage residue on a shared outline AntialiasCoverage 215,52 → 219,56 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 363,87 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 214,56 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,87 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 192,58 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 25,66 → 27,68 0.002067 ΔRGB(61,58,53) antialiasing coverage residue on a shared outline AntialiasCoverage 37,61 → 39,62 0.001938 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 30,66 → 30,68 0.001808 ΔRGB(-73,-69,-63) antialiasing coverage residue on a shared outline AntialiasCoverage 379,48 → 381,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 32,69 → 34,70 0.001550 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 377,77 → 380,77 0.001550 ΔRGB(4,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 196,81 → 198,83 0.001550 ΔRGB(33,31,28) antialiasing coverage residue on a shared outline AntialiasCoverage 376,81 → 379,81 0.001421 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 197,55 → 197,58 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 380,77 → 381,79 0.001292 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 374,83 → 374,85 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,85 → 380,86 0.001033 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 201,81 → 201,83 0.000904 ΔRGB(-51,-47,-44) antialiasing coverage residue on a shared outline AntialiasCoverage 379,60 → 381,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 382,77 → 382,79 0.000775 ΔRGB(2,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 219,46 → 220,46 0.000646 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 381,83 → 381,84 0.000517 ΔRGB(-2,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 376,78 → 376,78 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,79 → 376,79 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,80 → 380,80 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,82 → 375,83 0.000388 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 381,84 → 381,84 0.000388 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 378,85 → 379,85 0.000388 ΔRGB(-2,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 382,79 → 382,79 0.000258 ΔRGB(2,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,80 → 376,80 0.000258 ΔRGB(2,1,2) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-inline-text.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x inline-text interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
61 .f-inline-text {line-height:1.35;word-spacing:5px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-fonts-advanced f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.29% · raw 0.32% (3218 px) interactions-cartesian-effects-x-fonts-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 13.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and fonts-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (135 total; showing 64 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 135 3218 24,36 → 408,86 381 total 0.4% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 354,67 → 408,67 0.02 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 379,46 → 386,58 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 51,60 → 58,71 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 212,75 → 219,86 0.01 ΔRGB(38,36,32) antialiasing coverage residue on a shared outline AntialiasCoverage 352,46 → 361,58 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 24,60 → 33,71 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 359,75 → 368,86 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 388,50 → 394,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 60,64 → 66,70 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 356,48 → 361,53 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 28,61 → 33,67 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 368,82 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 374,46 → 379,58 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 46,60 → 51,71 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 362,46 → 363,58 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 34,60 → 35,71 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 369,75 → 370,86 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 378,47 → 384,51 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 50,61 → 56,65 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 195,75 → 204,86 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 207,75 → 212,86 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 390,49 → 395,58 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 62,63 → 67,72 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 211,76 → 217,80 0.007880 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 385,46 → 390,58 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 57,60 → 62,71 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 200,77 → 204,82 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 205,75 → 206,86 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 379,52 → 382,56 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 51,66 → 54,70 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 212,81 → 215,85 0.004392 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 376,52 → 378,56 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 48,66 → 50,70 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 389,46 → 391,50 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 61,60 → 63,64 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 211,85 0.003100 ΔRGB(69,65,59) antialiasing coverage residue on a shared outline AntialiasCoverage 353,55 → 356,58 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 25,68 → 28,71 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 363,86 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 361,55 → 361,58 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 33,68 → 33,71 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,86 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 196,84 → 199,86 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 387,57 → 389,58 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 59,70 → 61,72 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 364,60 → 366,61 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 36,74 → 38,75 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 380,76 0.001550 ΔRGB(4,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 372,49 → 373,50 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,63 → 45,64 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,80 → 379,80 0.001421 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 365,52 → 365,55 0.001292 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 370,58 → 371,60 0.001292 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 37,66 → 37,68 0.001292 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 42,72 → 43,73 0.001292 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,76 → 381,78 0.001292 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 374,82 → 374,84 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,84 → 204,86 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 365,56 → 366,57 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 37,69 → 38,71 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 380,85 0.001033 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,50 → 372,52 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,56 → 371,57 0.000904 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-fonts-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x fonts-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.28% · raw 0.31% (3099 px) interactions-cartesian-fonts-advanced-x-generated-content · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 13.4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for fonts-advanced and generated-content: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (178 total; showing 64 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 178 3099 24,46 → 382,127 230 total 0.4% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 199,49 → 211,61 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 223,46 → 231,58 0.02 ΔRGB(35,32,30) antialiasing coverage residue on a shared outline AntialiasCoverage 224,50 → 230,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 51,79 → 58,91 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 202,50 → 208,57 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 212,94 → 219,106 0.01 ΔRGB(38,36,32) antialiasing coverage residue on a shared outline AntialiasCoverage 24,79 → 33,91 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 359,94 → 368,106 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 60,83 → 66,90 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 28,81 → 33,86 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 364,96 → 368,101 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 221,46 → 226,58 0.009817 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 215,46 → 222,58 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 46,79 → 51,91 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 34,79 → 35,91 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 369,94 → 370,106 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 50,80 → 56,84 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 196,58 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 195,94 → 204,106 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 207,94 → 212,106 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 62,82 → 67,91 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 211,95 → 217,99 0.007880 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 57,79 → 62,91 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 220,51 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 215,58 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 193,48 → 197,53 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 200,96 → 204,101 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 198,46 → 199,58 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 205,94 → 206,106 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 51,85 → 54,89 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 212,100 → 215,104 0.004392 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 215,52 → 219,56 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 48,85 → 50,89 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 61,79 → 63,83 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 209,100 → 211,104 0.003100 ΔRGB(69,65,59) antialiasing coverage residue on a shared outline AntialiasCoverage 25,88 → 28,91 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 360,103 → 363,106 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 214,56 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 33,88 → 33,91 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 368,103 → 368,106 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 192,58 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 196,103 → 199,106 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 59,90 → 61,91 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 36,93 → 38,94 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,95 → 380,96 0.001550 ΔRGB(4,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 44,82 → 45,83 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,99 → 379,99 0.001421 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 197,55 → 197,58 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 37,85 → 37,88 0.001292 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 42,91 → 43,92 0.001292 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,96 → 381,98 0.001292 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 374,101 → 374,104 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,103 → 204,106 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 29,108 → 30,110 0.001292 ΔRGB(16,8,10) antialiasing coverage residue on a shared outline AntialiasCoverage 200,123 → 202,124 0.001292 ΔRGB(16,8,10) antialiasing coverage residue on a shared outline AntialiasCoverage 28,67 → 29,68 0.001163 ΔRGB(-1,-19,-20) antialiasing coverage residue on a shared outline AntialiasCoverage 200,82 → 200,83 0.001163 ΔRGB(-1,-19,-20) antialiasing coverage residue on a shared outline AntialiasCoverage 37,89 → 38,90 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 380,103 → 380,104 0.001033 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 30,106 → 31,108 0.001033 ΔRGB(-18,-8,-10) antialiasing coverage residue on a shared outline AntialiasCoverage 201,121 → 202,122 0.001033 ΔRGB(-18,-8,-10) antialiasing coverage residue on a shared outline AntialiasCoverage 31,63 → 32,63 0.000904 ΔRGB(1,19,20) antialiasing coverage residue on a shared outline AntialiasCoverage 28,70 → 29,71 0.000904 ΔRGB(-2,-17,-17) antialiasing coverage residue on a shared outline AntialiasCoverage 202,78 → 203,78 0.000904 ΔRGB(1,19,20) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-generated-content.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x generated-content interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
61 .f-generated-content {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-fonts-advanced f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-generated-content"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.24% · raw 0.30% (1132 px) interactions-cartesian-fonts-advanced-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages PASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 9.0
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff why: page 2: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Physical-page-context interaction for page-margins and fonts-advanced: the fonts-advanced representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
regions (100 total; showing 64 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 100 1132 18,20 → 60,60 112 total 0.3% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 30,23 → 38,34 0.03 ΔRGB(-14,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 24,49 → 33,60 0.02 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 53,24 → 59,30 0.02 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 28,51 → 33,56 0.02 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 34,49 → 35,60 0.02 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 33,23 → 40,35 0.02 ΔRGB(31,29,26) antialiasing coverage residue on a shared outline AntialiasCoverage 55,23 → 60,32 0.02 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 50,20 → 55,31 0.01 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 33,24 → 37,30 0.01 ΔRGB(-22,-21,-19) antialiasing coverage residue on a shared outline AntialiasCoverage 31,24 → 35,30 0.009867 ΔRGB(33,31,28) antialiasing coverage residue on a shared outline AntialiasCoverage 28,33 → 32,35 0.007733 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 54,20 → 56,24 0.006933 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 25,22 → 26,27 0.005867 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 25,58 → 28,60 0.005600 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 33,58 → 33,60 0.005333 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 28,27 → 28,31 0.004267 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 28,20 → 28,24 0.004000 ΔRGB(-2,-1,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 52,30 → 54,32 0.004000 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 45,21 → 48,21 0.003200 ΔRGB(4,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 42,50 → 45,51 0.003200 ΔRGB(4,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 44,25 → 47,25 0.002933 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 22,25 → 23,27 0.002933 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 41,54 → 44,54 0.002933 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 48,21 → 49,23 0.002667 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 42,27 → 43,29 0.002667 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 45,51 → 46,52 0.002667 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 39,56 → 39,59 0.002667 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 26,28 → 26,31 0.002400 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 48,29 → 49,30 0.002133 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,58 → 45,59 0.002133 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 25,20 → 26,21 0.001600 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 24,21 → 25,22 0.001600 ΔRGB(2,1,2) antialiasing coverage residue on a shared outline AntialiasCoverage 51,21 → 51,23 0.001600 ΔRGB(2,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 24,23 → 25,24 0.001600 ΔRGB(3,2,3) antialiasing coverage residue on a shared outline AntialiasCoverage 23,24 → 24,25 0.001600 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 21,25 → 22,26 0.001600 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 20,28 → 21,29 0.001600 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 47,50 → 47,52 0.001600 ΔRGB(2,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 23,22 → 24,23 0.001067 ΔRGB(2,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 22,24 → 23,24 0.001067 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 20,27 → 20,27 0.001067 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 49,27 → 49,28 0.001067 ΔRGB(-2,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 46,56 → 46,57 0.001067 ΔRGB(-2,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 44,22 → 44,22 0.000800 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,23 → 44,23 0.000800 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 48,24 → 48,24 0.000800 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 43,26 → 43,27 0.000800 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 49,28 → 49,28 0.000800 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 46,29 → 47,29 0.000800 ΔRGB(-2,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 41,51 → 41,52 0.000800 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 41,52 → 41,52 0.000800 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 45,53 → 45,53 0.000800 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 40,55 → 40,56 0.000800 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 46,57 → 46,58 0.000800 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 43,58 → 44,59 0.000800 ΔRGB(-2,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 50,23 → 50,23 0.000533 ΔRGB(2,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 56,23 → 56,23 0.000533 ΔRGB(-22,-21,-19) antialiasing coverage residue on a shared outline AntialiasCoverage 44,24 → 44,24 0.000533 ΔRGB(2,1,2) antialiasing coverage residue on a shared outline AntialiasCoverage 47,24 → 48,24 0.000533 ΔRGB(0,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 19,28 → 19,28 0.000533 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 47,28 → 47,29 0.000533 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 46,30 → 46,30 0.000533 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 20,30 → 20,30 0.000533 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 47,52 → 47,52 0.000533 ΔRGB(2,1,1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-page-margins.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x page-margins interaction</title>
6 <style>
7 @page {
8 size: 192px 200px;
9 margin: 16px;
10 background: #ffd6d6;
11 }
12 @page :left { margin: 8px 32px 24px 8px; }
13 @page :right { margin: 16px 8px 8px 32px; }
14 @page :first { margin: 32px 8px 16px 24px; }
15
16 @font-face {
17 font-family: MatrixSans;
18 src: url('../../fonts/ParitySans.ttf') format('truetype');
19 font-style: normal;
20 font-weight: 400;
21 }
22 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
23 * { box-sizing: border-box; margin: 0; }
24 html, body { background: #ffffff; }
25 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
26 .stage {
27 display: inline-flex;
28 width: 156px;
29 min-height: 164px;
30 margin-right: 8px;
31 align-items: center;
32 justify-content: center;
33 background: #f7fafc;
34 border: 1px solid #cbd5e1;
35 font-size: 16px;
36 vertical-align: top;
37 }
38 .stage:last-child { margin-right: 0; }
39 .node {
40 width: 126px;
41 padding: 7px;
42 border: 2px solid #577590;
43 background-color: #e7f5ff;
44 color: #17324d;
45 }
46 .node.inner {
47 width: 58px;
48 height: 48px;
49 padding: 5px;
50 }
51 .node.outer { min-height: 96px; }
52 .own { height: 22px; white-space: nowrap; }
53 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
54 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
55 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
56 .f-images-replaced > .own > .asset { display: inline-block; }
57 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
58 .f-lists-counters > .own > .token { counter-increment: pair-item; }
59 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
60 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
61 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
62 @supports (display:grid) {
63 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
64 }
65 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
66
67 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
68 .stage { display: block; margin: 0; break-before: page; }
69 .stage > .node { min-height: 68px; margin: 47px auto 0; }
70 .stage > .node.outer { margin-top: 33px; }
71
72 /* The three compositions occupy first/right, left, and later-right pages.
73 Their asymmetric page areas expose side selection, cascade, content
74 origin, bottom capacity, and paint that crosses a page-area edge.
75 Horizontal body padding is a distinct root-flow gutter: each stage
76 deliberately shifts through it to the physical page-area start edge. */
77 body { padding-left: 8px; padding-right: 8px; }
78 .stage {
79 width: 152px;
80 height: 128px;
81 min-height: 128px;
82 margin-left: -8px;
83 border: 0;
84 background: #d8f3dc;
85 }
86 .node { width: 100%; }
87 .stage > .node,
88 .stage > .node.outer { margin: 0; }
89 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
90 .f-page-margins {}
91 </style>
92 </head>
93 <body>
94 <div class="stage"><div class="node f-fonts-advanced f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
95 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-page-margins"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
96 <div class="stage"><div class="node outer f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
97 </body>
98 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.28% · raw 0.29% (2980 px) interactions-cartesian-fonts-advanced-x-units-values · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 12.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for fonts-advanced and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (52 total; showing 52 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 52 2980 15,46 → 374,86 230 total 0.4% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 199,49 → 211,61 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 27,63 → 38,75 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 223,46 → 231,58 0.02 ΔRGB(35,32,30) antialiasing coverage residue on a shared outline AntialiasCoverage 50,60 → 58,72 0.02 ΔRGB(26,24,22) antialiasing coverage residue on a shared outline AntialiasCoverage 224,50 → 230,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 202,50 → 208,57 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 29,64 → 35,70 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 51,64 → 57,70 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 212,75 → 219,86 0.01 ΔRGB(38,36,32) antialiasing coverage residue on a shared outline AntialiasCoverage 367,75 → 374,86 0.01 ΔRGB(38,36,32) antialiasing coverage residue on a shared outline AntialiasCoverage 221,46 → 226,58 0.009817 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 215,46 → 222,58 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 42,60 → 49,71 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 196,58 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 48,60 → 53,71 0.008526 ΔRGB(-66,-61,-56) antialiasing coverage residue on a shared outline AntialiasCoverage 15,60 → 24,71 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 195,75 → 204,86 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 350,75 → 359,86 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 207,75 → 212,86 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 362,75 → 367,86 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 211,76 → 217,80 0.007880 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 366,76 → 372,80 0.007880 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 220,51 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 42,61 → 47,65 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 215,58 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 37,60 → 42,71 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 193,48 → 197,53 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 20,62 → 24,67 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 200,77 → 204,82 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 355,77 → 359,82 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 198,46 → 199,58 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 26,60 → 26,71 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 205,75 → 206,86 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 361,75 → 361,86 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 212,81 → 215,85 0.004392 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 367,81 → 371,85 0.004392 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 215,52 → 219,56 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 42,66 → 46,70 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 211,85 0.003100 ΔRGB(69,65,59) antialiasing coverage residue on a shared outline AntialiasCoverage 364,81 → 366,85 0.003100 ΔRGB(69,65,59) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 214,56 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 40,66 → 41,70 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 192,58 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 17,68 → 19,71 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 196,84 → 199,86 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 352,84 → 354,86 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 197,55 → 197,58 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 24,68 → 24,71 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 204,84 → 204,86 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 359,84 → 359,86 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 219,46 → 220,46 0.000646 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 46,60 → 47,60 0.000646 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-units-values.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x units-values interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
61 .f-units-values {width:calc(100% - 9px);padding-left:5%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-fonts-advanced f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-units-values"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.27% · raw 0.29% (2972 px) interactions-cartesian-fonts-advanced-x-multicol · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 14.4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for fonts-advanced and multicol: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (81 total; showing 64 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 81 2972 24,46 → 440,86 230 total 0.4% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 199,49 → 211,61 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 223,46 → 231,58 0.02 ΔRGB(35,32,30) antialiasing coverage residue on a shared outline AntialiasCoverage 224,50 → 230,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 433,53 → 440,65 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 51,60 → 58,71 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 202,50 → 208,57 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 212,75 → 219,86 0.01 ΔRGB(20,19,18) antialiasing coverage residue on a shared outline AntialiasCoverage 24,60 → 33,71 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 60,64 → 66,70 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 28,61 → 33,67 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 221,46 → 226,58 0.009817 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 416,53 → 425,65 0.009817 ΔRGB(-49,-46,-42) antialiasing coverage residue on a shared outline AntialiasCoverage 421,55 → 426,60 0.009559 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 215,46 → 222,58 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 428,53 → 433,65 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 46,60 → 51,71 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 34,60 → 35,71 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 433,54 → 438,58 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 50,61 → 56,65 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 196,58 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 195,75 → 204,86 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 207,75 → 212,86 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 62,63 → 67,72 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 211,76 → 217,80 0.007880 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 57,60 → 62,71 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 220,51 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 215,58 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 427,53 → 427,65 0.006975 ΔRGB(78,73,67) antialiasing coverage residue on a shared outline AntialiasCoverage 193,48 → 197,53 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 200,77 → 204,82 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 198,46 → 199,58 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 205,75 → 206,86 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 433,59 → 437,63 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 51,66 → 54,70 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 212,81 → 215,85 0.004392 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 215,52 → 219,56 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 431,59 → 432,63 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 48,66 → 50,70 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 61,60 → 63,64 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 211,85 0.003100 ΔRGB(69,65,59) antialiasing coverage residue on a shared outline AntialiasCoverage 25,68 → 28,71 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 214,56 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 425,62 → 426,65 0.002583 ΔRGB(-44,-42,-38) antialiasing coverage residue on a shared outline AntialiasCoverage 33,68 → 33,71 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 418,62 → 420,65 0.002454 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 192,58 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 196,84 → 199,86 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 59,70 → 61,72 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 36,74 → 38,75 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,63 → 45,64 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 197,55 → 197,58 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 37,66 → 37,68 0.001292 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 42,72 → 43,73 0.001292 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,84 → 204,86 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 37,69 → 38,71 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 43,64 → 44,65 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,70 → 43,71 0.000904 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,66 → 44,68 0.000775 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 38,68 → 38,69 0.000775 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 36,73 → 38,74 0.000775 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 219,46 → 220,46 0.000646 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 43,68 → 43,68 0.000517 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,71 → 44,71 0.000517 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 41,63 → 41,63 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-multicol.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x multicol interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
61 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-fonts-advanced f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.27% · raw 0.29% (2958 px) interactions-cartesian-fonts-advanced-x-images-replaced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 18.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for fonts-advanced and images-replaced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (110 total; showing 64 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 110 2958 24,43 → 408,96 230 total 0.4% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 199,49 → 211,61 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 223,46 → 231,58 0.02 ΔRGB(35,32,30) antialiasing coverage residue on a shared outline AntialiasCoverage 224,50 → 230,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 51,69 → 58,81 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 202,50 → 208,57 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 24,69 → 33,81 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 359,75 → 368,86 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 60,73 → 66,80 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 28,71 → 33,76 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 368,82 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 408,43 → 408,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 221,46 → 226,58 0.009817 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 80,57 → 80,81 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 231,72 → 231,96 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 215,46 → 222,58 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 46,69 → 51,81 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 34,69 → 35,81 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 369,75 → 370,86 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 50,70 → 56,74 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 196,58 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 195,84 → 204,95 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 207,84 → 212,95 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 211,85 → 217,89 0.007880 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 57,69 → 62,81 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 220,51 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 215,58 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 193,48 → 197,53 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 200,86 → 204,91 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 198,46 → 199,58 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 205,84 → 206,95 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 51,75 → 54,79 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 212,90 → 215,94 0.004392 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 215,52 → 219,56 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 212,92 → 217,95 0.003875 ΔRGB(34,31,29) antialiasing coverage residue on a shared outline AntialiasCoverage 48,75 → 50,79 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 61,69 → 63,73 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 209,90 → 211,94 0.003100 ΔRGB(69,65,59) antialiasing coverage residue on a shared outline AntialiasCoverage 25,78 → 28,81 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 62,78 → 66,81 0.002713 ΔRGB(18,16,15) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 363,86 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 214,56 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 33,78 → 33,81 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,86 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 192,58 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 196,92 → 199,95 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 59,80 → 61,81 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 215,89 → 217,91 0.001679 ΔRGB(39,37,33) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 380,76 0.001550 ΔRGB(4,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 36,83 → 38,84 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,72 → 45,73 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,80 → 379,80 0.001421 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 197,55 → 197,58 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 37,76 → 37,78 0.001292 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 380,76 → 381,78 0.001292 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 42,81 → 43,83 0.001292 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 374,82 → 374,84 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,92 → 204,95 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 37,79 → 38,80 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 63,72 → 66,72 0.001033 ΔRGB(-3,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 380,85 0.001033 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 43,73 → 44,75 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,79 → 43,80 0.000904 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,76 → 44,77 0.000775 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 382,76 → 382,78 0.000775 ΔRGB(2,1,1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-images-replaced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x images-replaced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
61 .f-images-replaced {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-fonts-advanced f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.26% · raw 0.29% (2951 px) interactions-cartesian-flexbox-x-fonts-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 14.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for flexbox and fonts-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (111 total; showing 64 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 111 2951 57,46 → 395,92 262 total 0.4% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 68,77 → 79,89 0.03 ΔRGB(13,13,11) antialiasing coverage residue on a shared outline AntialiasCoverage 379,46 → 386,58 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 260,68 → 268,79 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 69,77 → 78,85 0.01 ΔRGB(-34,-32,-29) antialiasing coverage residue on a shared outline AntialiasCoverage 84,74 → 91,85 0.01 ΔRGB(38,36,32) antialiasing coverage residue on a shared outline AntialiasCoverage 387,81 → 394,92 0.01 ΔRGB(38,36,32) antialiasing coverage residue on a shared outline AntialiasCoverage 352,46 → 361,58 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 388,50 → 394,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 356,48 → 361,53 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 244,68 → 253,79 0.009817 ΔRGB(-49,-46,-42) antialiasing coverage residue on a shared outline AntialiasCoverage 57,74 → 66,85 0.009817 ΔRGB(-49,-46,-42) antialiasing coverage residue on a shared outline AntialiasCoverage 249,69 → 253,75 0.009559 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 61,76 → 66,81 0.009559 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 374,46 → 379,58 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 256,68 → 260,79 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 362,46 → 363,58 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 378,47 → 384,51 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 260,69 → 266,73 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 370,81 → 379,92 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 79,74 → 84,85 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 382,81 → 387,92 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 390,49 → 395,58 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 83,75 → 89,79 0.007880 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 386,82 → 392,86 0.007880 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 385,46 → 390,58 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 254,68 → 255,79 0.006975 ΔRGB(78,73,67) antialiasing coverage residue on a shared outline AntialiasCoverage 67,74 → 68,85 0.006975 ΔRGB(78,73,67) antialiasing coverage residue on a shared outline AntialiasCoverage 375,83 → 379,88 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 380,81 → 381,92 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 379,52 → 382,56 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 261,74 → 264,78 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 84,80 → 87,84 0.004392 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 387,87 → 390,91 0.004392 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 376,52 → 378,56 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 258,74 → 260,78 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 389,46 → 391,50 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 81,80 → 83,84 0.003100 ΔRGB(69,65,59) antialiasing coverage residue on a shared outline AntialiasCoverage 384,87 → 386,91 0.003100 ΔRGB(69,65,59) antialiasing coverage residue on a shared outline AntialiasCoverage 353,55 → 356,58 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 98,80 → 100,84 0.002713 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 361,55 → 361,58 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 253,76 → 253,79 0.002583 ΔRGB(-44,-42,-38) antialiasing coverage residue on a shared outline AntialiasCoverage 66,83 → 66,85 0.002583 ΔRGB(-44,-42,-38) antialiasing coverage residue on a shared outline AntialiasCoverage 245,76 → 248,79 0.002454 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 58,83 → 60,85 0.002454 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 94,76 → 96,78 0.002196 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 372,90 → 374,92 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 387,57 → 389,58 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 92,84 → 94,86 0.001808 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 364,60 → 366,61 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 372,49 → 373,50 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,52 → 365,55 0.001292 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 370,58 → 371,60 0.001292 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 93,75 → 94,77 0.001292 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 92,78 → 93,81 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 93,81 → 93,83 0.001292 ΔRGB(1,1,2) antialiasing coverage residue on a shared outline AntialiasCoverage 379,90 → 379,92 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 365,56 → 366,57 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 100,78 → 100,80 0.001033 ΔRGB(6,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 94,79 → 95,80 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,50 → 372,52 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,56 → 371,57 0.000904 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 96,83 → 97,84 0.000904 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 372,52 → 372,54 0.000775 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-flexbox-x-fonts-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>flexbox x fonts-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-flexbox {display:flex;align-items:center;justify-content:space-around;gap:4px;}
61 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-flexbox f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-flexbox"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.25% · raw 0.28% (2807 px) interactions-cartesian-fonts-advanced-x-grid · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 12.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for fonts-advanced and grid: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (105 total; showing 64 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 105 2807 24,46 → 433,92 230 total 0.4% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 199,49 → 211,61 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 223,46 → 231,58 0.02 ΔRGB(35,32,30) antialiasing coverage residue on a shared outline AntialiasCoverage 224,50 → 230,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 51,74 → 58,85 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 202,50 → 208,57 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 212,81 → 219,92 0.01 ΔRGB(38,36,32) antialiasing coverage residue on a shared outline AntialiasCoverage 24,74 → 33,85 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 60,78 → 66,84 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 28,76 → 33,81 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 221,46 → 226,58 0.009817 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 215,46 → 222,58 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 426,68 → 433,79 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 46,74 → 51,85 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 34,74 → 35,85 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 50,75 → 56,79 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 196,58 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 195,81 → 204,92 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 207,81 → 212,92 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 62,77 → 67,86 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 211,82 → 217,86 0.007880 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 57,74 → 62,85 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 220,51 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 425,69 → 431,73 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 215,58 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 421,68 → 426,79 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 193,48 → 197,53 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 200,83 → 204,88 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 198,46 → 199,58 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 205,81 → 206,92 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 51,80 → 54,84 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 212,87 → 215,91 0.004392 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 215,52 → 219,56 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 426,74 → 429,78 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 48,80 → 50,84 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 61,74 → 63,78 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 209,87 → 211,91 0.003100 ΔRGB(69,65,59) antialiasing coverage residue on a shared outline AntialiasCoverage 417,70 → 418,75 0.002842 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 25,83 → 28,85 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 214,56 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 423,74 → 425,78 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 33,83 → 33,85 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 192,58 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 196,90 → 199,92 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 420,75 → 420,79 0.002067 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 420,68 → 420,72 0.001938 ΔRGB(-2,-1,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 59,84 → 61,86 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 36,88 → 38,89 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 414,73 → 415,75 0.001421 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,77 → 45,78 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 197,55 → 197,58 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 37,80 → 37,83 0.001292 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 42,86 → 43,87 0.001292 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,90 → 204,92 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 418,76 → 418,79 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 37,84 → 38,85 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 43,78 → 44,79 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,84 → 43,85 0.000904 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 417,68 → 418,69 0.000775 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 416,69 → 417,70 0.000775 ΔRGB(2,1,2) antialiasing coverage residue on a shared outline AntialiasCoverage 416,71 → 417,72 0.000775 ΔRGB(3,2,3) antialiasing coverage residue on a shared outline AntialiasCoverage 415,72 → 416,73 0.000775 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 413,73 → 414,74 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 412,76 → 413,77 0.000775 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,80 → 44,82 0.000775 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-grid.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x grid interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
61 .f-grid {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-fonts-advanced f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-grid"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.25% · raw 0.28% (2801 px) interactions-cartesian-fonts-advanced-x-overflow-clipping · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 14.2
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for fonts-advanced and overflow-clipping: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (104 total; showing 64 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 104 2801 24,46 → 382,106 230 total 0.4% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 199,49 → 211,61 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 223,46 → 231,58 0.02 ΔRGB(35,32,30) antialiasing coverage residue on a shared outline AntialiasCoverage 224,50 → 230,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 51,65 → 58,76 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 202,50 → 208,57 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 212,75 → 219,86 0.01 ΔRGB(38,36,32) antialiasing coverage residue on a shared outline AntialiasCoverage 24,65 → 33,76 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 359,94 → 368,106 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 60,69 → 66,76 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 28,67 → 33,72 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 364,96 → 368,101 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 221,46 → 226,58 0.009817 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 215,46 → 222,58 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 46,65 → 51,76 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 34,65 → 35,76 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 369,94 → 370,106 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 50,66 → 56,70 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 196,58 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 195,75 → 204,86 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 207,75 → 212,86 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 62,68 → 67,77 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 211,76 → 217,80 0.007880 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 57,65 → 62,76 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 220,51 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 215,58 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 193,48 → 197,53 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 200,77 → 204,82 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 198,46 → 199,58 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 205,75 → 206,86 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 51,71 → 54,75 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 212,81 → 215,85 0.004392 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 215,52 → 219,56 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 48,71 → 50,75 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 61,65 → 63,69 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 211,85 0.003100 ΔRGB(69,65,59) antialiasing coverage residue on a shared outline AntialiasCoverage 25,74 → 28,76 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 360,103 → 363,106 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 214,56 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 33,74 → 33,76 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 368,103 → 368,106 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 192,58 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 196,84 → 199,86 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 59,76 → 61,77 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 36,79 → 38,80 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,95 → 380,96 0.001550 ΔRGB(4,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 44,68 → 45,69 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,99 → 379,99 0.001421 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 197,55 → 197,58 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 37,71 → 37,74 0.001292 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 42,77 → 43,78 0.001292 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,84 → 204,86 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 380,96 → 381,98 0.001292 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 374,101 → 374,104 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 37,75 → 38,76 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 380,103 → 380,104 0.001033 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 43,69 → 44,70 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,75 → 43,76 0.000904 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,71 → 44,73 0.000775 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 38,73 → 38,75 0.000775 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 36,78 → 38,79 0.000775 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 382,95 → 382,97 0.000775 ΔRGB(2,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 219,46 → 220,46 0.000646 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 43,73 → 43,74 0.000517 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,76 → 44,76 0.000517 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-overflow-clipping.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x overflow-clipping interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
61 .f-overflow-clipping {overflow:hidden;max-height:58px;border-radius:9px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-fonts-advanced f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-overflow-clipping"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.25% · raw 0.28% (2801 px) interactions-cartesian-fonts-advanced-x-selectors-cascade · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 14.4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for fonts-advanced and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (104 total; showing 64 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 104 2801 24,46 → 382,86 230 total 0.4% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 199,49 → 211,61 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 223,46 → 231,58 0.02 ΔRGB(35,32,30) antialiasing coverage residue on a shared outline AntialiasCoverage 224,50 → 230,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 51,60 → 58,71 0.01 ΔRGB(9,53,52) antialiasing coverage residue on a shared outline AntialiasCoverage 202,50 → 208,57 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 212,75 → 219,86 0.01 ΔRGB(7,41,41) antialiasing coverage residue on a shared outline AntialiasCoverage 24,60 → 33,71 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 359,75 → 368,86 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 60,64 → 66,70 0.01 ΔRGB(1,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 28,61 → 33,67 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 368,82 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 221,46 → 226,58 0.009817 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 215,46 → 222,58 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 46,60 → 51,71 0.009430 ΔRGB(-14,-83,-82) antialiasing coverage residue on a shared outline AntialiasCoverage 34,60 → 35,71 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 369,75 → 370,86 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 50,61 → 56,65 0.008655 ΔRGB(-1,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 196,58 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 195,75 → 204,86 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 207,75 → 212,86 0.008267 ΔRGB(-11,-71,-70) antialiasing coverage residue on a shared outline AntialiasCoverage 62,63 → 67,72 0.007880 ΔRGB(4,22,21) antialiasing coverage residue on a shared outline AntialiasCoverage 211,76 → 217,80 0.007880 ΔRGB(-1,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 57,60 → 62,71 0.007234 ΔRGB(-8,-46,-45) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 220,51 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 215,58 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 193,48 → 197,53 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 200,77 → 204,82 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 198,46 → 199,58 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 205,75 → 206,86 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 51,66 → 54,70 0.004521 ΔRGB(-10,-60,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 212,81 → 215,85 0.004392 ΔRGB(-5,-32,-31) antialiasing coverage residue on a shared outline AntialiasCoverage 215,52 → 219,56 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 48,66 → 50,70 0.003488 ΔRGB(13,79,78) antialiasing coverage residue on a shared outline AntialiasCoverage 61,60 → 63,64 0.003359 ΔRGB(5,30,29) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 211,85 0.003100 ΔRGB(13,75,74) antialiasing coverage residue on a shared outline AntialiasCoverage 25,68 → 28,71 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 363,86 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 214,56 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 33,68 → 33,71 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,86 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 192,58 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 196,84 → 199,86 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 59,70 → 61,72 0.001938 ΔRGB(-1,-5,-5) antialiasing coverage residue on a shared outline AntialiasCoverage 36,74 → 38,75 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 380,76 0.001550 ΔRGB(4,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 44,63 → 45,64 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,80 → 379,80 0.001421 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 197,55 → 197,58 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 37,66 → 37,68 0.001292 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 42,72 → 43,73 0.001292 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,76 → 381,78 0.001292 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 374,82 → 374,84 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,84 → 204,86 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 37,69 → 38,71 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 380,85 0.001033 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 43,64 → 44,65 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,70 → 43,71 0.000904 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,66 → 44,68 0.000775 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 38,68 → 38,69 0.000775 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 36,73 → 38,74 0.000775 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 382,76 → 382,78 0.000775 ΔRGB(2,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 219,46 → 220,46 0.000646 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 43,68 → 43,68 0.000517 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,71 → 44,71 0.000517 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-selectors-cascade.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x selectors-cascade interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
61 .f-selectors-cascade {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-fonts-advanced f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-selectors-cascade"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.23% · raw 0.28% (2799 px) interactions-cartesian-color-opacity-x-fonts-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 12.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for color-opacity and fonts-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (148 total; showing 64 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 148 2799 24,46 → 395,86 156 total 0.4% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 359,75 → 370,86 0.02 ΔRGB(-3,-4,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 379,46 → 386,58 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 51,60 → 58,71 0.01 ΔRGB(25,39,17) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 368,82 0.01 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 212,75 → 219,86 0.01 ΔRGB(29,28,25) antialiasing coverage residue on a shared outline AntialiasCoverage 352,46 → 361,58 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 24,60 → 33,71 0.01 ΔRGB(-29,-47,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 388,50 → 394,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 60,64 → 66,70 0.01 ΔRGB(2,3,1) antialiasing coverage residue on a shared outline AntialiasCoverage 356,48 → 361,53 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 28,61 → 33,67 0.01 ΔRGB(3,5,2) antialiasing coverage residue on a shared outline AntialiasCoverage 374,46 → 379,58 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 46,60 → 51,71 0.009430 ΔRGB(-39,-62,-28) antialiasing coverage residue on a shared outline AntialiasCoverage 362,46 → 363,58 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 34,60 → 35,71 0.008784 ΔRGB(42,67,31) antialiasing coverage residue on a shared outline AntialiasCoverage 378,47 → 384,51 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 50,61 → 56,65 0.008655 ΔRGB(-1,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 195,75 → 204,86 0.008526 ΔRGB(-20,-19,-17) antialiasing coverage residue on a shared outline AntialiasCoverage 207,75 → 212,86 0.008267 ΔRGB(-50,-47,-42) antialiasing coverage residue on a shared outline AntialiasCoverage 390,49 → 395,58 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 62,63 → 67,72 0.007880 ΔRGB(10,16,8) antialiasing coverage residue on a shared outline AntialiasCoverage 211,76 → 217,80 0.007880 ΔRGB(-3,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 368,86 0.007363 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 385,46 → 390,58 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 57,60 → 62,71 0.007234 ΔRGB(-21,-34,-15) antialiasing coverage residue on a shared outline AntialiasCoverage 200,77 → 204,82 0.006459 ΔRGB(9,9,8) antialiasing coverage residue on a shared outline AntialiasCoverage 205,75 → 206,86 0.005038 ΔRGB(39,37,34) antialiasing coverage residue on a shared outline AntialiasCoverage 379,52 → 382,56 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 51,66 → 54,70 0.004521 ΔRGB(-28,-44,-20) antialiasing coverage residue on a shared outline AntialiasCoverage 212,81 → 215,85 0.004392 ΔRGB(-22,-21,-19) antialiasing coverage residue on a shared outline AntialiasCoverage 376,52 → 378,56 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 48,66 → 50,70 0.003488 ΔRGB(37,58,27) antialiasing coverage residue on a shared outline AntialiasCoverage 389,46 → 391,50 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 61,60 → 63,64 0.003359 ΔRGB(14,22,10) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 211,85 0.003100 ΔRGB(52,50,45) antialiasing coverage residue on a shared outline AntialiasCoverage 353,55 → 356,58 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 25,68 → 28,71 0.002713 ΔRGB(32,51,24) antialiasing coverage residue on a shared outline AntialiasCoverage 361,55 → 361,58 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 33,68 → 33,71 0.002583 ΔRGB(-35,-56,-26) antialiasing coverage residue on a shared outline AntialiasCoverage 379,76 → 381,79 0.002196 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 196,84 → 199,86 0.002196 ΔRGB(22,21,18) antialiasing coverage residue on a shared outline AntialiasCoverage 376,76 → 380,77 0.002067 ΔRGB(2,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 375,81 → 379,82 0.002067 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 387,57 → 389,58 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 59,70 → 61,72 0.001938 ΔRGB(-2,-4,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 374,81 → 375,84 0.001808 ΔRGB(1,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,79 → 379,80 0.001679 ΔRGB(-1,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,60 → 366,61 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 36,74 → 38,75 0.001550 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 376,75 → 380,75 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 372,49 → 373,50 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,63 → 45,64 0.001421 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 365,52 → 365,55 0.001292 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 370,58 → 371,60 0.001292 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 37,66 → 37,68 0.001292 ΔRGB(-1,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,84 → 204,86 0.001292 ΔRGB(-38,-36,-32) antialiasing coverage residue on a shared outline AntialiasCoverage 376,86 → 378,86 0.001292 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,56 → 366,57 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 380,81 → 381,83 0.001033 antialiasing coverage residue on a shared outline AntialiasCoverage 380,83 → 381,84 0.001033 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 371,50 → 372,52 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,56 → 371,57 0.000904 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 37,69 → 37,71 0.000904 ΔRGB(1,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,70 → 43,71 0.000904 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-fonts-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x fonts-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-color-opacity {color:#5a189a;opacity:.76;}
61 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-color-opacity f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.24% · raw 0.27% (2776 px) interactions-cartesian-fonts-advanced-x-tables · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 11.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for fonts-advanced and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (124 total; showing 64 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 124 2776 30,46 → 386,92 262 total 0.4% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 41,69 → 52,81 0.03 ΔRGB(13,13,11) antialiasing coverage residue on a shared outline AntialiasCoverage 199,49 → 211,61 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 223,46 → 231,58 0.02 ΔRGB(35,32,30) antialiasing coverage residue on a shared outline AntialiasCoverage 224,50 → 230,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 202,50 → 208,57 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 43,69 → 51,77 0.01 ΔRGB(-34,-32,-29) antialiasing coverage residue on a shared outline AntialiasCoverage 220,81 → 228,92 0.01 ΔRGB(38,36,32) antialiasing coverage residue on a shared outline AntialiasCoverage 69,70 → 75,76 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 221,46 → 226,58 0.009817 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 30,66 → 39,77 0.009817 ΔRGB(-49,-46,-42) antialiasing coverage residue on a shared outline AntialiasCoverage 35,68 → 39,73 0.009559 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 215,46 → 222,58 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 379,78 → 386,90 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 196,58 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 216,81 → 220,92 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 71,69 → 76,78 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 220,82 → 226,86 0.007880 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 66,66 → 71,77 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 220,51 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 378,79 → 384,83 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 215,58 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 40,66 → 41,77 0.006975 ΔRGB(78,73,67) antialiasing coverage residue on a shared outline AntialiasCoverage 374,78 → 379,90 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 193,48 → 197,53 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 198,46 → 199,58 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 221,87 → 224,91 0.004392 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 215,52 → 219,56 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 379,84 → 382,88 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 70,66 → 72,70 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 218,87 → 220,91 0.003100 ΔRGB(69,65,59) antialiasing coverage residue on a shared outline AntialiasCoverage 370,80 → 371,85 0.002842 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 209,83 → 210,88 0.002842 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 214,56 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 39,75 → 39,77 0.002583 ΔRGB(-44,-42,-38) antialiasing coverage residue on a shared outline AntialiasCoverage 376,84 → 378,88 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 31,75 → 34,77 0.002454 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 192,58 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 372,85 → 372,90 0.002067 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 212,88 → 212,92 0.002067 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 68,76 → 70,78 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 372,78 → 372,83 0.001938 ΔRGB(-2,-1,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 212,81 → 212,85 0.001938 ΔRGB(-2,-1,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 61,67 → 64,68 0.001550 ΔRGB(4,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 60,71 → 63,71 0.001421 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 367,84 → 368,85 0.001421 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,86 → 207,88 0.001421 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 197,55 → 197,58 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 64,68 → 65,69 0.001292 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 58,73 → 59,76 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,87 → 371,89 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 210,90 → 210,92 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 64,75 → 65,76 0.001033 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 67,67 → 67,69 0.000775 ΔRGB(2,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,78 → 371,79 0.000775 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 369,79 → 370,80 0.000775 ΔRGB(2,1,2) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 210,82 0.000775 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 369,81 → 370,82 0.000775 ΔRGB(3,2,3) antialiasing coverage residue on a shared outline AntialiasCoverage 208,82 → 209,83 0.000775 ΔRGB(2,1,2) antialiasing coverage residue on a shared outline AntialiasCoverage 368,82 → 369,83 0.000775 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 366,83 → 367,84 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 208,84 → 209,85 0.000775 ΔRGB(3,2,3) antialiasing coverage residue on a shared outline AntialiasCoverage 207,85 → 208,86 0.000775 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 205,86 → 206,87 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,87 → 366,88 0.000775 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-tables.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x tables interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
61 .f-tables {display:table;border-collapse:separate;border-spacing:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-fonts-advanced f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-tables"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.23% · raw 0.27% (2728 px) interactions-cartesian-fonts-advanced-x-positioning · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 13.9
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for fonts-advanced and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (132 total; showing 64 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 132 2728 24,46 → 382,106 230 total 0.4% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 199,49 → 211,61 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 223,46 → 231,58 0.02 ΔRGB(35,32,30) antialiasing coverage residue on a shared outline AntialiasCoverage 224,50 → 230,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 119,94 → 126,106 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 202,50 → 208,57 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 235,91 → 242,102 0.01 ΔRGB(38,36,32) antialiasing coverage residue on a shared outline AntialiasCoverage 24,60 → 33,71 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 359,75 → 368,86 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 28,61 → 33,67 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 368,82 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 221,46 → 226,58 0.009817 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 215,46 → 222,58 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 115,94 → 119,106 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 34,60 → 35,71 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 369,75 → 370,86 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 119,95 → 125,99 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 196,58 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 195,75 → 204,86 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 230,91 → 235,102 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 234,92 → 240,96 0.007880 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 220,51 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 215,58 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 193,48 → 197,53 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 200,77 → 204,82 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 198,46 → 199,58 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 205,75 → 206,86 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 120,100 → 123,104 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 235,97 → 238,101 0.004392 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 215,52 → 219,56 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 117,100 → 119,104 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 232,97 → 234,101 0.003100 ΔRGB(69,65,59) antialiasing coverage residue on a shared outline AntialiasCoverage 25,68 → 28,71 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 363,86 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 133,100 → 136,105 0.002713 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 214,56 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 33,68 → 33,71 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,86 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 192,58 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 196,84 → 199,86 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 130,96 → 132,98 0.002196 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 128,105 → 130,106 0.001808 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 36,74 → 38,75 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 380,76 0.001550 ΔRGB(4,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 44,63 → 45,64 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,80 → 379,80 0.001421 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 197,55 → 197,58 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 37,66 → 37,68 0.001292 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 42,72 → 43,73 0.001292 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,76 → 381,78 0.001292 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 374,82 → 374,84 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,84 → 204,86 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 129,95 → 130,97 0.001292 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 128,99 → 129,101 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 129,101 → 129,103 0.001292 ΔRGB(1,1,2) antialiasing coverage residue on a shared outline AntialiasCoverage 37,69 → 38,71 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 380,85 0.001033 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 136,98 → 136,100 0.001033 ΔRGB(6,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 130,99 → 131,100 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 43,64 → 44,65 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,70 → 43,71 0.000904 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 132,103 → 133,104 0.000904 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,66 → 44,68 0.000775 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 38,68 → 38,69 0.000775 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 36,73 → 38,74 0.000775 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-positioning.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x positioning interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
61 .f-positioning {position:relative;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-fonts-advanced f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-positioning"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.23% · raw 0.26% (2670 px) interactions-cartesian-clip-mask-x-fonts-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 0.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and fonts-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (135 total; showing 64 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 135 2670 24,46 → 395,122 96 total 0.3% · largest 0.01% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 379,46 → 386,58 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 51,60 → 58,71 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 212,75 → 219,86 0.01 ΔRGB(38,36,32) antialiasing coverage residue on a shared outline AntialiasCoverage 352,46 → 361,58 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 24,60 → 33,71 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 359,75 → 368,86 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 388,50 → 394,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 60,64 → 66,70 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 356,48 → 361,53 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 28,61 → 33,67 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 368,82 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 374,46 → 379,58 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 46,60 → 51,71 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 362,46 → 363,58 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 34,60 → 35,71 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 369,75 → 370,86 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 378,47 → 384,51 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 50,61 → 56,65 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 195,75 → 204,86 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 207,75 → 212,86 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 390,49 → 395,58 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 62,63 → 67,72 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 211,76 → 217,80 0.007880 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 385,46 → 390,58 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 57,60 → 62,71 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 200,77 → 204,82 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 205,75 → 206,86 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 379,52 → 382,56 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 51,66 → 54,70 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 212,81 → 215,85 0.004392 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 376,52 → 378,56 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 48,66 → 50,70 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 389,46 → 391,50 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 61,60 → 63,64 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 211,85 0.003100 ΔRGB(69,65,59) antialiasing coverage residue on a shared outline AntialiasCoverage 353,55 → 356,58 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 25,68 → 28,71 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 363,86 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 361,55 → 361,58 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 33,68 → 33,71 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,86 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 196,84 → 199,86 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 387,57 → 389,58 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 59,70 → 61,72 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 364,60 → 366,61 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 36,74 → 38,75 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 380,76 0.001550 ΔRGB(4,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 372,49 → 373,50 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,63 → 45,64 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,80 → 379,80 0.001421 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 365,52 → 365,55 0.001292 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 370,58 → 371,60 0.001292 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 37,66 → 37,68 0.001292 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 42,72 → 43,73 0.001292 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,76 → 381,78 0.001292 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 374,82 → 374,84 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,84 → 204,86 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 365,56 → 366,57 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 37,69 → 38,71 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 380,85 0.001033 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,50 → 372,52 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,56 → 371,57 0.000904 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 43,64 → 44,65 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,70 → 43,71 0.000904 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-fonts-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x fonts-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.23% · raw 0.26% (2668 px) interactions-cartesian-block-box-model-x-fonts-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 14.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for block-box-model and fonts-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (133 total; showing 64 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 133 2668 24,46 → 395,91 96 total 0.3% · largest 0.01%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 379,46 → 386,58 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 51,64 → 58,76 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 212,79 → 219,91 0.01 ΔRGB(38,36,32) antialiasing coverage residue on a shared outline AntialiasCoverage 352,46 → 361,58 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 24,64 → 33,76 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 359,75 → 368,86 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 388,50 → 394,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 60,68 → 66,75 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 356,48 → 361,53 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 28,66 → 33,71 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 368,82 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 374,46 → 379,58 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 46,64 → 51,76 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 362,46 → 363,58 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 34,64 → 35,76 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 369,75 → 370,86 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 378,47 → 384,51 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 50,65 → 56,69 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 195,79 → 204,91 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 207,79 → 212,91 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 390,49 → 395,58 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 62,67 → 67,76 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 211,80 → 217,84 0.007880 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 385,46 → 390,58 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 57,64 → 62,76 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 200,81 → 204,86 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 205,79 → 206,91 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 379,52 → 382,56 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 51,70 → 54,74 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 212,85 → 215,89 0.004392 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 376,52 → 378,56 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 48,70 → 50,74 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 389,46 → 391,50 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 61,64 → 63,68 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 209,85 → 211,89 0.003100 ΔRGB(69,65,59) antialiasing coverage residue on a shared outline AntialiasCoverage 353,55 → 356,58 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 25,73 → 28,76 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 363,86 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 361,55 → 361,58 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 33,73 → 33,76 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,86 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 196,88 → 199,91 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 387,57 → 389,58 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 59,75 → 61,76 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 364,60 → 366,61 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 380,76 0.001550 ΔRGB(4,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 36,78 → 38,79 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 372,49 → 373,50 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,67 → 45,68 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,80 → 379,80 0.001421 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 365,52 → 365,55 0.001292 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 370,58 → 371,60 0.001292 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 37,70 → 37,73 0.001292 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 42,76 → 43,77 0.001292 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,76 → 381,78 0.001292 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 374,82 → 374,84 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,88 → 204,91 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 365,56 → 366,57 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 37,74 → 38,75 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 380,85 0.001033 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,50 → 372,52 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,56 → 371,57 0.000904 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 43,68 → 44,69 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,74 → 43,75 0.000904 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-block-box-model-x-fonts-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>block-box-model x fonts-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-block-box-model {box-sizing:border-box;padding:11px 7px;min-width:92px;max-width:132px;}
61 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-block-box-model f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-block-box-model"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-block-box-model"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.21% · raw 0.25% (2519 px) interactions-cartesian-inline-text-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage missing 0.05% extra 0.05% ΔE 2.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for inline-text and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (245 total; showing 64 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 122 2179 25,48 → 395,95 268 total 0.3% · largest 0.03% · max ΔE 3.9 Extra 52 158 42,62 → 395,90 17 total 0.02% · largest 0.002196% Missing 71 182 40,63 → 379,95 16 total 0.02% · largest 0.002067%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 25,79 → 61,80 0.03 ΔE 2.1 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 196,92 → 218,94 0.02 ΔE 1.8 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 204,48 → 212,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 360,93 → 379,95 0.02 ΔE 1.9 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 217,51 → 223,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 217,52 → 222,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 206,54 → 211,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,49 → 211,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 40,62 → 48,65 0.007234 ΔRGB(-95,-89,-81) antialiasing coverage residue on a shared outline AntialiasCoverage 368,77 → 376,80 0.007234 ΔRGB(-95,-89,-81) antialiasing coverage residue on a shared outline AntialiasCoverage 42,63 → 47,67 0.007105 ΔRGB(-26,-24,-23) antialiasing coverage residue on a shared outline AntialiasCoverage 370,78 → 374,82 0.007105 ΔRGB(-26,-24,-23) antialiasing coverage residue on a shared outline AntialiasCoverage 42,68 → 47,73 0.006200 ΔRGB(-15,-14,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 370,84 → 375,88 0.006200 ΔRGB(-15,-14,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 53,67 → 58,73 0.006071 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 53,65 → 59,68 0.005684 ΔRGB(-76,-73,-69) antialiasing coverage residue on a shared outline AntialiasCoverage 53,66 → 54,71 0.003100 ΔRGB(27,25,21) antialiasing coverage residue on a shared outline AntialiasCoverage 60,68 → 60,73 0.002454 ΔE 1.2 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline Extra 42,75 → 47,75 0.002196 candidate adds paint absent from reference (0.002196%) Extra 369,90 → 374,90 0.002196 candidate adds paint absent from reference (0.002196%) AntialiasCoverage 59,68 → 60,72 0.002196 ΔRGB(9,4,2) antialiasing coverage residue on a shared outline AntialiasCoverage 48,68 → 49,72 0.002196 ΔRGB(-30,-27,-23) antialiasing coverage residue on a shared outline AntialiasCoverage 375,84 → 377,87 0.002196 ΔRGB(-30,-27,-23) antialiasing coverage residue on a shared outline Missing 42,74 → 46,74 0.002067 candidate lacks paint present in reference (0.002067%) Missing 369,89 → 374,89 0.002067 candidate lacks paint present in reference (0.002067%) AntialiasCoverage 53,74 → 56,75 0.001938 ΔRGB(84,74,64) antialiasing coverage residue on a shared outline AntialiasCoverage 54,68 → 54,72 0.001808 ΔE 0.8 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 46,66 → 48,68 0.001679 ΔRGB(44,42,38) antialiasing coverage residue on a shared outline AntialiasCoverage 42,68 → 45,68 0.001679 ΔRGB(93,82,71) antialiasing coverage residue on a shared outline AntialiasCoverage 374,81 → 376,83 0.001679 ΔRGB(44,42,38) antialiasing coverage residue on a shared outline AntialiasCoverage 370,83 → 373,84 0.001679 ΔRGB(93,82,71) antialiasing coverage residue on a shared outline AntialiasCoverage 215,48 → 217,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 51,62 → 53,62 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 43,69 → 46,69 0.001550 ΔE 3.9 ΔRGB(-14,-5,0) antialiasing coverage residue on a shared outline AntialiasCoverage 371,84 → 374,84 0.001550 ΔE 3.9 ΔRGB(-14,-5,0) antialiasing coverage residue on a shared outline Missing 42,68 → 45,68 0.001421 candidate lacks paint present in reference (0.001421%) Missing 370,84 → 373,84 0.001421 candidate lacks paint present in reference (0.001421%) AntialiasCoverage 43,64 → 46,65 0.001421 ΔE 3.8 ΔRGB(-14,-6,0) antialiasing coverage residue on a shared outline AntialiasCoverage 371,79 → 373,80 0.001421 ΔE 3.8 ΔRGB(-14,-6,0) antialiasing coverage residue on a shared outline Missing 42,64 → 45,64 0.001292 candidate lacks paint present in reference (0.001292%) Missing 370,79 → 373,79 0.001292 candidate lacks paint present in reference (0.001292%) Extra 43,69 → 46,69 0.001292 candidate adds paint absent from reference (0.001292%) Extra 371,84 → 374,84 0.001292 candidate adds paint absent from reference (0.001292%) AntialiasCoverage 49,70 → 50,73 0.001292 ΔE 1.2 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 47,72 → 48,73 0.001292 ΔRGB(108,96,83) antialiasing coverage residue on a shared outline AntialiasCoverage 57,72 → 58,74 0.001292 ΔRGB(93,84,74) antialiasing coverage residue on a shared outline AntialiasCoverage 377,85 → 377,88 0.001292 ΔE 1.2 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 374,87 → 376,88 0.001292 ΔRGB(108,96,83) antialiasing coverage residue on a shared outline Extra 43,64 → 46,64 0.001163 candidate adds paint absent from reference (0.001163%) Extra 55,75 → 58,75 0.001163 candidate adds paint absent from reference (0.001163%) Extra 371,79 → 373,79 0.001163 candidate adds paint absent from reference (0.001163%) AntialiasCoverage 49,65 → 49,67 0.001163 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,80 → 377,82 0.001163 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline Missing 60,78 → 61,80 0.001033 candidate lacks paint present in reference (0.001033%) AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline Missing 54,74 → 56,74 0.000904 candidate lacks paint present in reference (0.000904%) AntialiasCoverage 55,75 → 57,75 0.000904 ΔE 3.2 ΔRGB(-12,-5,0) antialiasing coverage residue on a shared outline Extra 55,67 → 57,67 0.000775 candidate adds paint absent from reference (0.000775%) AntialiasCoverage 215,60 → 217,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 53,73 → 53,73 0.000775 ΔRGB(91,81,70) antialiasing coverage residue on a shared outline AntialiasCoverage 45,74 → 46,74 0.000775 ΔRGB(65,57,50) antialiasing coverage residue on a shared outline AntialiasCoverage 61,78 → 61,80 0.000775 ΔE 0.4 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 372,89 → 374,89 0.000775 ΔRGB(65,57,50) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-inline-text-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>inline-text x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-inline-text {line-height:1.35;word-spacing:5px;}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-inline-text f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.21% · raw 0.25% (2515 px) interactions-cartesian-backgrounds-borders-x-fonts-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 11.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and fonts-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (160 total; showing 64 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 160 2515 17,46 → 395,110 112 total 0.3% · largest 0.01%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 38,64 → 46,75 0.01 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 379,46 → 386,58 0.01 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 212,76 → 220,87 0.01 ΔRGB(38,36,32) antialiasing coverage residue on a shared outline AntialiasCoverage 352,46 → 361,58 0.01 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 360,76 → 369,87 0.01 ΔRGB(-55,-52,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 388,50 → 394,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 61,65 → 67,72 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 356,48 → 361,53 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 364,77 → 369,83 0.01 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 374,46 → 379,58 0.009430 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 362,46 → 363,58 0.008784 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 370,76 → 371,87 0.008784 ΔRGB(79,75,71) antialiasing coverage residue on a shared outline AntialiasCoverage 378,47 → 384,51 0.008655 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 196,76 → 204,87 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 41,64 → 48,76 0.008267 ΔRGB(29,28,26) antialiasing coverage residue on a shared outline AntialiasCoverage 208,76 → 212,87 0.008267 ΔRGB(-65,-61,-55) antialiasing coverage residue on a shared outline AntialiasCoverage 390,49 → 395,58 0.007880 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 63,64 → 68,73 0.007880 ΔRGB(19,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 212,77 → 218,81 0.007880 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 385,46 → 390,58 0.007234 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 58,61 → 63,73 0.007234 ΔRGB(-39,-38,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 201,78 → 205,83 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 41,65 → 45,72 0.005684 ΔRGB(-21,-20,-19) antialiasing coverage residue on a shared outline AntialiasCoverage 206,76 → 207,87 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 39,65 → 43,72 0.004779 ΔRGB(31,30,28) antialiasing coverage residue on a shared outline AntialiasCoverage 379,52 → 382,56 0.004521 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 213,82 → 216,86 0.004392 ΔRGB(-29,-27,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 36,74 → 40,76 0.003746 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 376,52 → 378,56 0.003488 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 389,46 → 391,50 0.003359 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 62,61 → 64,65 0.003359 ΔRGB(26,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 210,82 → 212,86 0.003100 ΔRGB(69,65,59) antialiasing coverage residue on a shared outline AntialiasCoverage 33,63 → 34,68 0.002842 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 353,55 → 356,58 0.002713 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 361,84 → 364,87 0.002713 ΔRGB(60,57,54) antialiasing coverage residue on a shared outline AntialiasCoverage 361,55 → 361,58 0.002583 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 369,84 → 369,87 0.002583 ΔRGB(-65,-62,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 197,84 → 200,87 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 36,68 → 36,73 0.002067 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 387,57 → 389,58 0.001938 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 36,61 → 36,66 0.001938 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 60,72 → 62,73 0.001938 ΔRGB(-4,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 364,60 → 366,61 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 53,62 → 56,63 0.001550 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 378,77 → 381,77 0.001550 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 372,49 → 373,50 0.001421 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 52,66 → 55,66 0.001421 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 30,67 → 31,68 0.001421 ΔRGB(2,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,81 → 380,81 0.001421 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 365,52 → 365,55 0.001292 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 370,58 → 371,60 0.001292 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 56,63 → 57,65 0.001292 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 50,68 → 51,71 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 381,77 → 382,79 0.001292 ΔRGB(3,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 375,83 → 375,85 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 205,84 → 205,87 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 365,56 → 366,57 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 34,70 → 34,72 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 56,70 → 57,71 0.001033 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,85 → 381,86 0.001033 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,50 → 372,52 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,56 → 371,57 0.000904 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 372,52 → 372,54 0.000775 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 366,54 → 366,56 0.000775 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-fonts-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x fonts-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.21% · raw 0.25% (923 px) interactions-cartesian-fonts-advanced-x-paged-media · same-element-and-bidirectional-nesting · 4 pages PASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 14.9
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for fonts-advanced and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (45 total; showing 45 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 45 923 24,60 → 67,75 96 total 0.4% · largest 0.04%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 51,60 → 58,71 0.04 ΔRGB(48,45,41) antialiasing coverage residue on a shared outline AntialiasCoverage 24,60 → 33,71 0.03 ΔRGB(-58,-54,-49) antialiasing coverage residue on a shared outline AntialiasCoverage 60,64 → 66,70 0.03 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 28,61 → 33,67 0.03 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 46,60 → 51,71 0.03 ΔRGB(-76,-72,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 34,60 → 35,71 0.03 ΔRGB(83,78,71) antialiasing coverage residue on a shared outline AntialiasCoverage 50,61 → 56,65 0.03 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 62,63 → 67,72 0.02 ΔRGB(20,18,17) antialiasing coverage residue on a shared outline AntialiasCoverage 57,60 → 62,71 0.02 ΔRGB(-42,-39,-35) antialiasing coverage residue on a shared outline AntialiasCoverage 51,66 → 54,70 0.01 ΔRGB(-55,-52,-47) antialiasing coverage residue on a shared outline AntialiasCoverage 48,66 → 50,70 0.01 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 61,60 → 63,64 0.01 ΔRGB(27,25,23) antialiasing coverage residue on a shared outline AntialiasCoverage 25,68 → 28,71 0.008422 ΔRGB(63,59,54) antialiasing coverage residue on a shared outline AntialiasCoverage 33,68 → 33,71 0.008021 ΔRGB(-69,-65,-59) antialiasing coverage residue on a shared outline AntialiasCoverage 59,70 → 61,72 0.006016 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 36,74 → 38,75 0.004813 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,63 → 45,64 0.004412 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 37,66 → 37,68 0.004011 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 42,72 → 43,73 0.004011 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 37,69 → 38,71 0.003609 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 43,64 → 44,65 0.002807 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,70 → 43,71 0.002807 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,66 → 44,68 0.002406 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 38,68 → 38,69 0.002406 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 36,73 → 38,74 0.002406 ΔRGB(-2,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 43,68 → 43,68 0.001604 ΔRGB(0,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 44,71 → 44,71 0.001604 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 41,63 → 41,63 0.000802 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 40,63 → 41,63 0.000802 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 63,63 → 63,63 0.000802 ΔRGB(-22,-21,-19) antialiasing coverage residue on a shared outline AntialiasCoverage 41,64 → 41,64 0.000802 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 38,65 → 38,66 0.000802 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,71 → 42,72 0.000802 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 40,63 → 40,63 0.000401 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 40,64 → 40,64 0.000401 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 41,64 → 41,64 0.000401 ΔRGB(-1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 38,65 → 38,65 0.000401 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 38,66 → 38,66 0.000401 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 39,70 → 39,70 0.000401 ΔRGB(-1,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 39,70 → 39,70 0.000401 ΔRGB(-1,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 38,71 → 38,71 0.000401 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,72 → 42,72 0.000401 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 36,73 → 36,73 0.000401 ΔRGB(-2,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 40,75 → 40,75 0.000401 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 39,75 → 39,75 0.000401 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-paged-media.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x paged-media interaction</title>
6 <style>
7 @page { size: 192px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 min-height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 padding: 7px;
35 border: 2px solid #577590;
36 background-color: #e7f5ff;
37 color: #17324d;
38 }
39 .node.inner {
40 width: 58px;
41 height: 48px;
42 padding: 5px;
43 }
44 .node.outer { min-height: 96px; }
45 .own { height: 22px; white-space: nowrap; }
46 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
47 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
48 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
49 .f-images-replaced > .own > .asset { display: inline-block; }
50 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
51 .f-lists-counters > .own > .token { counter-increment: pair-item; }
52 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
53 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
54 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
55 @supports (display:grid) {
56 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
57 }
58 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
59
60 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
61 .stage { display: block; margin: 0; break-before: page; }
62 .stage > .node { min-height: 68px; margin: 47px auto 0; }
63 .stage > .node.outer { margin-top: 33px; }
64 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
65 .f-paged-media {break-before:page;break-inside:avoid;}
66 </style>
67 </head>
68 <body>
69 <div class="stage"><div class="node f-fonts-advanced f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
70 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-paged-media"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
71 <div class="stage"><div class="node outer f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
72 </body>
73 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.22% · raw 0.22% (2245 px) interactions-cartesian-fonts-advanced-x-typography · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 9.8
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for fonts-advanced and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (379 total; showing 64 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 379 2245 23,46 → 386,89 230 total 0.3% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 199,49 → 211,61 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 223,46 → 231,58 0.02 ΔRGB(35,32,30) antialiasing coverage residue on a shared outline AntialiasCoverage 224,50 → 230,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 202,50 → 208,57 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 221,46 → 226,58 0.009817 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 215,46 → 222,58 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 196,58 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 220,51 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 215,58 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 193,48 → 197,53 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 198,46 → 199,58 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 215,52 → 219,56 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 214,56 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 192,58 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 43,76 → 45,77 0.001679 ΔRGB(19,18,16) antialiasing coverage residue on a shared outline AntialiasCoverage 42,63 → 44,65 0.001550 ΔRGB(18,17,16) antialiasing coverage residue on a shared outline AntialiasCoverage 73,64 → 75,66 0.001550 ΔRGB(-25,-23,-21) antialiasing coverage residue on a shared outline AntialiasCoverage 41,71 → 44,72 0.001550 ΔRGB(-15,-14,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 62,61 → 63,63 0.001421 ΔRGB(-35,-33,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 43,66 → 44,67 0.001421 ΔRGB(19,18,16) antialiasing coverage residue on a shared outline AntialiasCoverage 221,76 → 222,78 0.001421 ΔRGB(-35,-33,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 385,76 → 386,78 0.001421 ΔRGB(-35,-33,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 197,55 → 197,58 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 57,73 → 59,74 0.001292 ΔRGB(16,14,14) antialiasing coverage residue on a shared outline AntialiasCoverage 216,88 → 218,89 0.001292 ΔRGB(16,14,14) antialiasing coverage residue on a shared outline AntialiasCoverage 380,88 → 382,89 0.001292 ΔRGB(16,14,14) antialiasing coverage residue on a shared outline AntialiasCoverage 40,66 → 41,68 0.001163 ΔRGB(19,18,16) antialiasing coverage residue on a shared outline AntialiasCoverage 73,70 → 74,72 0.001163 ΔRGB(16,14,14) antialiasing coverage residue on a shared outline AntialiasCoverage 69,63 → 71,64 0.001033 ΔRGB(16,14,14) antialiasing coverage residue on a shared outline AntialiasCoverage 47,64 → 48,64 0.001033 ΔRGB(-4,-4,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 70,73 → 71,74 0.001033 ΔRGB(19,18,16) antialiasing coverage residue on a shared outline AntialiasCoverage 61,65 → 62,66 0.000904 ΔRGB(19,18,16) antialiasing coverage residue on a shared outline AntialiasCoverage 61,67 → 61,68 0.000904 ΔRGB(-14,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 70,71 → 71,72 0.000904 ΔRGB(19,18,16) antialiasing coverage residue on a shared outline AntialiasCoverage 72,72 → 73,73 0.000904 ΔRGB(33,30,28) antialiasing coverage residue on a shared outline AntialiasCoverage 44,73 → 44,74 0.000904 ΔRGB(33,30,28) antialiasing coverage residue on a shared outline AntialiasCoverage 43,74 → 44,75 0.000904 ΔRGB(40,37,34) antialiasing coverage residue on a shared outline AntialiasCoverage 220,80 → 221,81 0.000904 ΔRGB(19,18,16) antialiasing coverage residue on a shared outline AntialiasCoverage 384,80 → 385,81 0.000904 ΔRGB(19,18,16) antialiasing coverage residue on a shared outline AntialiasCoverage 220,82 → 220,83 0.000904 ΔRGB(-14,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 384,82 → 384,83 0.000904 ΔRGB(-14,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 32,61 → 33,62 0.000775 ΔRGB(34,32,29) antialiasing coverage residue on a shared outline AntialiasCoverage 31,62 → 32,63 0.000775 ΔRGB(19,18,16) antialiasing coverage residue on a shared outline AntialiasCoverage 60,62 → 61,63 0.000775 ΔRGB(-19,-18,-16) antialiasing coverage residue on a shared outline AntialiasCoverage 63,64 → 63,65 0.000775 ΔRGB(19,18,16) antialiasing coverage residue on a shared outline AntialiasCoverage 29,65 → 30,66 0.000775 ΔRGB(31,29,27) antialiasing coverage residue on a shared outline AntialiasCoverage 28,66 → 29,67 0.000775 ΔRGB(28,26,24) antialiasing coverage residue on a shared outline AntialiasCoverage 31,66 → 31,67 0.000775 ΔRGB(24,22,20) antialiasing coverage residue on a shared outline AntialiasCoverage 30,68 → 30,68 0.000775 ΔRGB(19,18,16) antialiasing coverage residue on a shared outline AntialiasCoverage 59,68 → 59,69 0.000775 ΔRGB(-18,-17,-16) antialiasing coverage residue on a shared outline AntialiasCoverage 26,70 → 26,71 0.000775 ΔRGB(36,34,31) antialiasing coverage residue on a shared outline AntialiasCoverage 27,71 → 28,72 0.000775 ΔRGB(30,28,26) antialiasing coverage residue on a shared outline AntialiasCoverage 44,71 → 45,72 0.000775 ΔRGB(28,26,24) antialiasing coverage residue on a shared outline AntialiasCoverage 203,76 → 204,77 0.000775 ΔRGB(34,32,29) antialiasing coverage residue on a shared outline AntialiasCoverage 367,76 → 368,77 0.000775 ΔRGB(34,32,29) antialiasing coverage residue on a shared outline AntialiasCoverage 37,77 → 38,77 0.000775 ΔRGB(-14,-14,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 202,77 → 203,78 0.000775 ΔRGB(19,18,16) antialiasing coverage residue on a shared outline AntialiasCoverage 219,77 → 220,78 0.000775 ΔRGB(-19,-18,-16) antialiasing coverage residue on a shared outline AntialiasCoverage 366,77 → 367,78 0.000775 ΔRGB(19,18,16) antialiasing coverage residue on a shared outline AntialiasCoverage 383,77 → 384,78 0.000775 ΔRGB(-19,-18,-16) antialiasing coverage residue on a shared outline AntialiasCoverage 222,79 → 222,80 0.000775 ΔRGB(19,18,16) antialiasing coverage residue on a shared outline AntialiasCoverage 386,79 → 386,80 0.000775 ΔRGB(19,18,16) antialiasing coverage residue on a shared outline AntialiasCoverage 200,80 → 201,81 0.000775 ΔRGB(31,29,27) antialiasing coverage residue on a shared outline AntialiasCoverage 364,80 → 365,81 0.000775 ΔRGB(31,29,27) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-typography.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x typography interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
61 .f-typography {font-size:18px;font-weight:700;letter-spacing:.7px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-fonts-advanced f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-typography"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.13% · raw 0.21% (2164 px) interactions-cartesian-fonts-advanced-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 7.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for fonts-advanced and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (336 total; showing 64 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 336 2164 28,46 → 413,87 230 total 0.3% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 199,49 → 211,61 0.03 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 223,46 → 231,58 0.02 ΔRGB(35,32,30) antialiasing coverage residue on a shared outline AntialiasCoverage 224,50 → 230,57 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 202,50 → 208,57 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 221,46 → 226,58 0.009817 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 215,46 → 222,58 0.009430 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 188,46 → 196,58 0.008526 ΔRGB(-26,-24,-22) antialiasing coverage residue on a shared outline AntialiasCoverage 214,47 → 220,51 0.007105 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 210,46 → 215,58 0.006975 ΔRGB(-43,-40,-36) antialiasing coverage residue on a shared outline AntialiasCoverage 193,48 → 197,53 0.006459 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 198,46 → 199,58 0.005038 ΔRGB(52,48,44) antialiasing coverage residue on a shared outline AntialiasCoverage 215,52 → 219,56 0.004134 ΔRGB(-13,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 212,52 → 214,56 0.002583 ΔRGB(45,42,39) antialiasing coverage residue on a shared outline AntialiasCoverage 65,61 → 66,65 0.002325 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 189,55 → 192,58 0.002196 ΔRGB(29,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 34,60 → 36,62 0.002067 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 62,71 → 64,73 0.002067 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 369,75 → 371,78 0.002067 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 204,76 → 206,78 0.002067 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 39,59 → 39,63 0.001938 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 67,60 → 68,63 0.001938 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 49,64 → 51,67 0.001938 ΔRGB(2,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 62,67 → 64,70 0.001938 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 68,70 → 70,72 0.001938 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 373,74 → 374,78 0.001938 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 209,75 → 209,79 0.001938 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 48,62 → 50,64 0.001808 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 36,60 → 38,62 0.001679 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,76 → 372,77 0.001679 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,76 → 208,78 0.001679 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 37,61 → 37,65 0.001550 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 32,62 → 34,64 0.001550 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 69,67 → 70,70 0.001550 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 372,77 → 372,80 0.001550 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 207,77 → 207,81 0.001550 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 367,78 → 368,80 0.001550 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 202,78 → 204,80 0.001550 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 69,64 → 71,65 0.001421 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 39,65 → 39,68 0.001421 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 373,81 → 373,84 0.001421 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 209,84 0.001421 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 197,55 → 197,58 0.001292 ΔRGB(-50,-47,-43) antialiasing coverage residue on a shared outline AntialiasCoverage 30,65 → 31,67 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 60,67 → 60,69 0.001292 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,81 → 366,83 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 200,81 → 201,83 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 384,81 → 385,84 0.001292 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 220,82 → 220,84 0.001292 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 41,68 → 42,70 0.001163 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 70,68 → 71,70 0.001033 ΔRGB(-4,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 61,71 → 62,72 0.001033 ΔRGB(-3,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 44,73 → 45,74 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 46,62 → 48,62 0.000904 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 43,63 → 44,64 0.000904 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 54,66 → 54,68 0.000904 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 71,66 → 72,68 0.000904 ΔRGB(-2,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 36,67 → 37,68 0.000904 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 58,68 → 59,69 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 59,70 → 60,71 0.000904 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 378,81 → 379,82 0.000904 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 213,81 → 214,83 0.000904 ΔRGB(2,2,1) antialiasing coverage residue on a shared outline AntialiasCoverage 382,83 → 383,84 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 218,83 → 219,84 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,83 → 372,84 0.000904 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-fonts-advanced-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>fonts-advanced x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-fonts-advanced {font-family:MatrixSans;font-style:oblique 20deg;}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-fonts-advanced f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-fonts-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-fonts-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.20% · raw 0.21% (2121 px) interactions-cartesian-inline-text-x-inline-text · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 25.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for inline-text and inline-text: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (27 total; showing 27 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 27 2121 40,48 → 387,89 143 total 0.3% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 204,48 → 212,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 368,48 → 377,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 40,62 → 49,74 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 204,77 → 212,89 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 368,77 → 376,89 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 217,51 → 223,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 381,51 → 387,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 53,65 → 59,74 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 217,52 → 222,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 381,52 → 386,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 53,66 → 58,73 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 206,54 → 211,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,54 → 375,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,68 → 47,73 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,83 → 211,88 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,83 → 375,88 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,49 → 211,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 370,49 → 375,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 42,63 → 47,67 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 206,78 → 211,82 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 370,78 → 374,82 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 215,48 → 217,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 379,48 → 381,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 51,62 → 53,62 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 215,60 → 217,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 379,60 → 381,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 51,74 → 53,74 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-inline-text-x-inline-text.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>inline-text x inline-text interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-inline-text {line-height:1.35;word-spacing:5px;}
61 </style>
62 </head>
63 <body>
64 <div class="stage"><div class="node f-inline-text f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
65 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
66 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 </body>
68 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.20% · raw 0.20% (751 px) interactions-cartesian-color-opacity-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages PASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 4.2
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff why: page 2: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Physical-page-context interaction for page-margins and color-opacity: the color-opacity representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
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 751 8,8 → 160,96 751 total 0.2% · largest 0.2%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 8,8 → 160,96 0.2 ΔRGB(19,7,4) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-page-margins.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x page-margins interaction</title>
6 <style>
7 @page {
8 size: 192px 200px;
9 margin: 16px;
10 background: #ffd6d6;
11 }
12 @page :left { margin: 8px 32px 24px 8px; }
13 @page :right { margin: 16px 8px 8px 32px; }
14 @page :first { margin: 32px 8px 16px 24px; }
15
16 @font-face {
17 font-family: MatrixSans;
18 src: url('../../fonts/ParitySans.ttf') format('truetype');
19 font-style: normal;
20 font-weight: 400;
21 }
22 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
23 * { box-sizing: border-box; margin: 0; }
24 html, body { background: #ffffff; }
25 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
26 .stage {
27 display: inline-flex;
28 width: 156px;
29 min-height: 164px;
30 margin-right: 8px;
31 align-items: center;
32 justify-content: center;
33 background: #f7fafc;
34 border: 1px solid #cbd5e1;
35 font-size: 16px;
36 vertical-align: top;
37 }
38 .stage:last-child { margin-right: 0; }
39 .node {
40 width: 126px;
41 padding: 7px;
42 border: 2px solid #577590;
43 background-color: #e7f5ff;
44 color: #17324d;
45 }
46 .node.inner {
47 width: 58px;
48 height: 48px;
49 padding: 5px;
50 }
51 .node.outer { min-height: 96px; }
52 .own { height: 22px; white-space: nowrap; }
53 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
54 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
55 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
56 .f-images-replaced > .own > .asset { display: inline-block; }
57 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
58 .f-lists-counters > .own > .token { counter-increment: pair-item; }
59 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
60 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
61 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
62 @supports (display:grid) {
63 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
64 }
65 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
66
67 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
68 .stage { display: block; margin: 0; break-before: page; }
69 .stage > .node { min-height: 68px; margin: 47px auto 0; }
70 .stage > .node.outer { margin-top: 33px; }
71
72 /* The three compositions occupy first/right, left, and later-right pages.
73 Their asymmetric page areas expose side selection, cascade, content
74 origin, bottom capacity, and paint that crosses a page-area edge.
75 Horizontal body padding is a distinct root-flow gutter: each stage
76 deliberately shifts through it to the physical page-area start edge. */
77 body { padding-left: 8px; padding-right: 8px; }
78 .stage {
79 width: 152px;
80 height: 128px;
81 min-height: 128px;
82 margin-left: -8px;
83 border: 0;
84 background: #d8f3dc;
85 }
86 .node { width: 100%; }
87 .stage > .node,
88 .stage > .node.outer { margin: 0; }
89 .f-color-opacity {color:#5a189a;opacity:.76;}
90 .f-page-margins {}
91 </style>
92 </head>
93 <body>
94 <div class="stage"><div class="node f-color-opacity f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
95 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-page-margins"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
96 <div class="stage"><div class="node outer f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
97 </body>
98 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.20% · raw 0.20% (738 px) interactions-cartesian-effects-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages PASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 5.9
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff why: page 2: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Physical-page-context interaction for page-margins and effects: the effects representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
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 738 10,13 → 160,101 463 total 0.2% · largest 0.1%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 10,94 → 158,94 0.1 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 160,13 → 160,101 0.07 ΔRGB(-1,-7,-5) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-page-margins.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x page-margins interaction</title>
6 <style>
7 @page {
8 size: 192px 200px;
9 margin: 16px;
10 background: #ffd6d6;
11 }
12 @page :left { margin: 8px 32px 24px 8px; }
13 @page :right { margin: 16px 8px 8px 32px; }
14 @page :first { margin: 32px 8px 16px 24px; }
15
16 @font-face {
17 font-family: MatrixSans;
18 src: url('../../fonts/ParitySans.ttf') format('truetype');
19 font-style: normal;
20 font-weight: 400;
21 }
22 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
23 * { box-sizing: border-box; margin: 0; }
24 html, body { background: #ffffff; }
25 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
26 .stage {
27 display: inline-flex;
28 width: 156px;
29 min-height: 164px;
30 margin-right: 8px;
31 align-items: center;
32 justify-content: center;
33 background: #f7fafc;
34 border: 1px solid #cbd5e1;
35 font-size: 16px;
36 vertical-align: top;
37 }
38 .stage:last-child { margin-right: 0; }
39 .node {
40 width: 126px;
41 padding: 7px;
42 border: 2px solid #577590;
43 background-color: #e7f5ff;
44 color: #17324d;
45 }
46 .node.inner {
47 width: 58px;
48 height: 48px;
49 padding: 5px;
50 }
51 .node.outer { min-height: 96px; }
52 .own { height: 22px; white-space: nowrap; }
53 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
54 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
55 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
56 .f-images-replaced > .own > .asset { display: inline-block; }
57 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
58 .f-lists-counters > .own > .token { counter-increment: pair-item; }
59 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
60 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
61 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
62 @supports (display:grid) {
63 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
64 }
65 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
66
67 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
68 .stage { display: block; margin: 0; break-before: page; }
69 .stage > .node { min-height: 68px; margin: 47px auto 0; }
70 .stage > .node.outer { margin-top: 33px; }
71
72 /* The three compositions occupy first/right, left, and later-right pages.
73 Their asymmetric page areas expose side selection, cascade, content
74 origin, bottom capacity, and paint that crosses a page-area edge.
75 Horizontal body padding is a distinct root-flow gutter: each stage
76 deliberately shifts through it to the physical page-area start edge. */
77 body { padding-left: 8px; padding-right: 8px; }
78 .stage {
79 width: 152px;
80 height: 128px;
81 min-height: 128px;
82 margin-left: -8px;
83 border: 0;
84 background: #d8f3dc;
85 }
86 .node { width: 100%; }
87 .stage > .node,
88 .stage > .node.outer { margin: 0; }
89 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
90 .f-page-margins {}
91 </style>
92 </head>
93 <body>
94 <div class="stage"><div class="node f-effects f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
95 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-page-margins"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
96 <div class="stage"><div class="node outer f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
97 </body>
98 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.19% · raw 0.19% (1970 px) interactions-cartesian-inline-text-x-lists-counters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: predominant shared-outline coverage ColorValue ΔE 27.9
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill recolour ΔRGB(-1,+0,-1) (ΔE 27.9)
Cartesian family interaction for inline-text and lists-counters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (26 total; showing 26 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 26 1970 25,48 → 376,89 297 total 0.3% · largest 0.04%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 25,59 → 30,74 0.04 ΔRGB(1,10,11) fill recolour ΔRGB(+1,+10,+11) (ΔE 0) AntialiasCoverage 204,48 → 212,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 67,62 → 75,74 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 368,77 → 376,89 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 217,51 → 223,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 79,65 → 85,74 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 242,76 → 246,87 0.01 ΔRGB(24,25,25) antialiasing coverage residue on a shared outline AntialiasCoverage 217,52 → 222,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 79,66 → 84,73 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 206,54 → 211,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 68,68 → 73,73 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,83 → 375,88 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 237,76 → 238,87 0.009559 ΔRGB(-20,-19,-17) antialiasing coverage residue on a shared outline AntialiasCoverage 206,49 → 211,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 68,63 → 73,67 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 370,78 → 374,82 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 242,82 → 244,86 0.005167 ΔRGB(-29,-31,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 242,77 → 244,81 0.004650 ΔRGB(-28,-26,-24) antialiasing coverage residue on a shared outline AntialiasCoverage 239,82 → 239,86 0.003617 ΔRGB(71,66,60) antialiasing coverage residue on a shared outline ColorValue 32,66 → 33,68 0.003229 ΔRGB(10,116,122) fill recolour ΔRGB(+10,+116,+122) (ΔE 0) ColorValue 32,72 → 33,74 0.003229 ΔRGB(-10,-116,-122) fill recolour ΔRGB(-10,-116,-122) (ΔE 0) AntialiasCoverage 239,77 → 239,81 0.003100 ΔRGB(68,64,59) antialiasing coverage residue on a shared outline AntialiasCoverage 215,48 → 217,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 77,62 → 79,62 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 215,60 → 217,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 77,74 → 79,74 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-inline-text-x-lists-counters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>inline-text x lists-counters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-inline-text {line-height:1.35;word-spacing:5px;}
61 .f-lists-counters {counter-reset:pair-item;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-inline-text f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.19% · raw 0.19% (1953 px) interactions-cartesian-flexbox-x-inline-text · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 29.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for flexbox and inline-text: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (18 total; showing 18 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 18 1953 60,48 → 387,88 314 total 0.3% · largest 0.04%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 76,76 → 84,88 0.04 ΔRGB(-8,-7,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 87,79 → 95,88 0.04 ΔRGB(6,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 68,75 → 74,83 0.02 ΔRGB(-15,-13,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 60,73 → 67,82 0.02 ΔRGB(-15,-14,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 368,48 → 377,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 253,70 → 261,82 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 381,51 → 387,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 78,77 → 83,81 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 381,52 → 386,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 370,54 → 375,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 255,76 → 260,81 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,49 → 375,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 255,71 → 260,75 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 62,74 → 65,79 0.007621 ΔRGB(23,22,20) antialiasing coverage residue on a shared outline AntialiasCoverage 69,81 → 74,84 0.005038 ΔRGB(75,70,64) antialiasing coverage residue on a shared outline AntialiasCoverage 87,76 → 89,76 0.002325 ΔRGB(-93,-88,-80) antialiasing coverage residue on a shared outline AntialiasCoverage 379,48 → 381,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 379,60 → 381,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-flexbox-x-inline-text.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>flexbox x inline-text interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-flexbox {display:flex;align-items:center;justify-content:space-around;gap:4px;}
61 .f-inline-text {line-height:1.35;word-spacing:5px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-flexbox f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-flexbox"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.19% · raw 0.19% (1953 px) interactions-cartesian-generated-content-x-inline-text · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 29.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for generated-content and inline-text: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (18 total; showing 18 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 18 1953 24,48 → 387,108 314 total 0.3% · largest 0.04%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 40,84 → 49,96 0.04 ΔRGB(-8,-7,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 51,87 → 59,96 0.04 ΔRGB(6,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 32,83 → 38,91 0.02 ΔRGB(-15,-13,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 24,81 → 31,90 0.02 ΔRGB(-15,-14,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 368,48 → 377,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 204,96 → 212,108 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 381,51 → 387,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 42,85 → 47,89 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 381,52 → 386,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 370,54 → 375,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,102 → 211,107 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,49 → 375,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 206,97 → 211,101 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 26,82 → 29,87 0.007621 ΔRGB(23,22,20) antialiasing coverage residue on a shared outline AntialiasCoverage 33,89 → 38,92 0.005038 ΔRGB(75,70,64) antialiasing coverage residue on a shared outline AntialiasCoverage 51,84 → 53,84 0.002325 ΔRGB(-93,-88,-80) antialiasing coverage residue on a shared outline AntialiasCoverage 379,48 → 381,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 379,60 → 381,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-generated-content-x-inline-text.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>generated-content x inline-text interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-generated-content {}
61 .f-inline-text {line-height:1.35;word-spacing:5px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-generated-content f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-generated-content"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.19% · raw 0.19% (1953 px) interactions-cartesian-grid-x-inline-text · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 29.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for grid and inline-text: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (18 total; showing 18 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 18 1953 24,48 → 387,88 314 total 0.3% · largest 0.04%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 40,76 → 49,88 0.04 ΔRGB(-8,-7,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 51,79 → 59,88 0.04 ΔRGB(6,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 32,75 → 38,83 0.02 ΔRGB(-15,-13,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 24,73 → 31,82 0.02 ΔRGB(-15,-14,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 368,48 → 377,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 254,70 → 262,82 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 381,51 → 387,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 42,77 → 47,81 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 381,52 → 386,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 370,54 → 375,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 256,76 → 261,81 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,49 → 375,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 256,71 → 260,75 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 26,74 → 29,79 0.007621 ΔRGB(23,22,20) antialiasing coverage residue on a shared outline AntialiasCoverage 33,81 → 38,84 0.005038 ΔRGB(75,70,64) antialiasing coverage residue on a shared outline AntialiasCoverage 51,76 → 53,76 0.002325 ΔRGB(-93,-88,-80) antialiasing coverage residue on a shared outline AntialiasCoverage 379,48 → 381,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 379,60 → 381,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-grid-x-inline-text.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>grid x inline-text interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-grid {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px;}
61 .f-inline-text {line-height:1.35;word-spacing:5px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-grid f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-grid"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.18% · raw 0.18% (1867 px) interactions-cartesian-effects-x-inline-text · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 20.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and inline-text: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (19 total; showing 19 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 19 1867 40,36 → 408,89 381 total 0.2% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 354,67 → 408,67 0.02 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 368,48 → 377,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 40,62 → 49,74 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 204,77 → 212,89 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 381,51 → 387,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 53,65 → 59,74 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 381,52 → 386,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 53,66 → 58,73 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 370,54 → 375,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,68 → 47,73 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,83 → 211,88 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,49 → 375,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 42,63 → 47,67 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 206,78 → 211,82 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 379,48 → 381,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 51,62 → 53,62 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 379,60 → 381,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 51,74 → 53,74 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-inline-text.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x inline-text interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-inline-text {line-height:1.35;word-spacing:5px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.17% · raw 0.17% (1747 px) interactions-cartesian-inline-text-x-overflow-clipping · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 24.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for inline-text and overflow-clipping: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (21 total; showing 21 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 21 1747 24,48 → 376,108 186 total 0.2% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 32,66 → 38,74 0.02 ΔRGB(-15,-13,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 24,64 → 31,73 0.02 ΔRGB(-15,-14,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 204,48 → 212,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 40,67 → 49,79 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 368,96 → 376,108 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 217,51 → 223,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 53,70 → 59,79 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 217,52 → 222,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 53,71 → 58,78 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 206,54 → 211,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,73 → 47,77 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,102 → 375,107 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,49 → 211,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 42,68 → 47,72 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 370,97 → 374,101 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 26,65 → 29,70 0.007621 ΔRGB(23,22,20) antialiasing coverage residue on a shared outline AntialiasCoverage 33,72 → 38,75 0.005038 ΔRGB(75,70,64) antialiasing coverage residue on a shared outline AntialiasCoverage 215,48 → 217,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 51,67 → 53,67 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 215,60 → 217,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 51,79 → 53,79 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-inline-text-x-overflow-clipping.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>inline-text x overflow-clipping interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-inline-text {line-height:1.35;word-spacing:5px;}
61 .f-overflow-clipping {overflow:hidden;max-height:58px;border-radius:9px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-inline-text f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-overflow-clipping"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.13% · raw 0.16% (1660 px) interactions-cartesian-color-opacity-x-inline-text · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 17.2
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for color-opacity and inline-text: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (88 total; showing 64 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 88 1660 40,48 → 387,89 143 total 0.2% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 368,48 → 377,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 40,62 → 49,74 0.02 ΔRGB(-4,-7,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 204,77 → 212,89 0.02 ΔRGB(-7,-6,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 381,51 → 387,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 53,65 → 59,74 0.01 ΔRGB(2,4,2) antialiasing coverage residue on a shared outline AntialiasCoverage 381,52 → 386,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 53,66 → 58,73 0.01 ΔRGB(2,3,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,54 → 375,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,68 → 47,73 0.009946 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,83 → 211,88 0.009946 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,49 → 375,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 42,63 → 47,67 0.009171 ΔRGB(2,3,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,78 → 211,82 0.009171 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 373,82 → 377,86 0.004909 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,76 → 371,87 0.004650 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 373,77 → 376,81 0.003875 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,84 → 367,85 0.002971 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,83 → 366,83 0.001679 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,48 → 381,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 51,62 → 53,62 0.001550 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 372,76 → 375,76 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,76 → 365,77 0.001292 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 379,77 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,77 → 364,79 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,78 → 379,79 0.000904 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,82 → 361,83 0.000904 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,87 → 378,87 0.000904 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,60 → 381,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 51,74 → 53,74 0.000775 ΔRGB(107,168,77) antialiasing coverage residue on a shared outline AntialiasCoverage 366,78 → 366,80 0.000775 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,85 → 369,87 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,81 → 366,82 0.000646 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,83 → 368,84 0.000646 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,77 → 363,78 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,79 → 362,79 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,79 → 365,80 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 367,81 → 367,81 0.000517 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,82 → 367,83 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 380,85 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,87 → 361,87 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,80 → 362,80 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,80 → 379,80 0.000388 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,80 → 377,80 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,82 → 379,82 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,83 → 380,84 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,84 → 378,84 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,85 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,85 → 378,85 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,86 → 379,86 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 359,86 → 359,87 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,76 → 376,76 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,76 → 365,77 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,77 → 365,77 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,77 → 377,77 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,78 → 366,78 0.000258 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,78 → 378,79 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,79 → 363,80 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 361,81 → 361,81 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,81 → 363,81 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,81 → 378,81 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,81 → 363,82 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,81 → 378,81 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,82 → 362,83 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,82 → 377,82 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-inline-text.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x inline-text interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-color-opacity {color:#5a189a;opacity:.76;}
61 .f-inline-text {line-height:1.35;word-spacing:5px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-color-opacity f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.16% · raw 0.16% (608 px) interactions-cartesian-backgrounds-borders-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages PASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 5.2
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff why: page 2: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Physical-page-context interaction for page-margins and backgrounds-borders: the backgrounds-borders representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
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 608 8,8 → 148,86 401 total 0.2% · largest 0.1%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 20,8 → 148,8 0.1 ΔRGB(26,17,13) antialiasing coverage residue on a shared outline AntialiasCoverage 8,20 → 8,86 0.06 ΔRGB(26,17,13) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-page-margins.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x page-margins interaction</title>
6 <style>
7 @page {
8 size: 192px 200px;
9 margin: 16px;
10 background: #ffd6d6;
11 }
12 @page :left { margin: 8px 32px 24px 8px; }
13 @page :right { margin: 16px 8px 8px 32px; }
14 @page :first { margin: 32px 8px 16px 24px; }
15
16 @font-face {
17 font-family: MatrixSans;
18 src: url('../../fonts/ParitySans.ttf') format('truetype');
19 font-style: normal;
20 font-weight: 400;
21 }
22 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
23 * { box-sizing: border-box; margin: 0; }
24 html, body { background: #ffffff; }
25 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
26 .stage {
27 display: inline-flex;
28 width: 156px;
29 min-height: 164px;
30 margin-right: 8px;
31 align-items: center;
32 justify-content: center;
33 background: #f7fafc;
34 border: 1px solid #cbd5e1;
35 font-size: 16px;
36 vertical-align: top;
37 }
38 .stage:last-child { margin-right: 0; }
39 .node {
40 width: 126px;
41 padding: 7px;
42 border: 2px solid #577590;
43 background-color: #e7f5ff;
44 color: #17324d;
45 }
46 .node.inner {
47 width: 58px;
48 height: 48px;
49 padding: 5px;
50 }
51 .node.outer { min-height: 96px; }
52 .own { height: 22px; white-space: nowrap; }
53 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
54 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
55 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
56 .f-images-replaced > .own > .asset { display: inline-block; }
57 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
58 .f-lists-counters > .own > .token { counter-increment: pair-item; }
59 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
60 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
61 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
62 @supports (display:grid) {
63 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
64 }
65 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
66
67 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
68 .stage { display: block; margin: 0; break-before: page; }
69 .stage > .node { min-height: 68px; margin: 47px auto 0; }
70 .stage > .node.outer { margin-top: 33px; }
71
72 /* The three compositions occupy first/right, left, and later-right pages.
73 Their asymmetric page areas expose side selection, cascade, content
74 origin, bottom capacity, and paint that crosses a page-area edge.
75 Horizontal body padding is a distinct root-flow gutter: each stage
76 deliberately shifts through it to the physical page-area start edge. */
77 body { padding-left: 8px; padding-right: 8px; }
78 .stage {
79 width: 152px;
80 height: 128px;
81 min-height: 128px;
82 margin-left: -8px;
83 border: 0;
84 background: #d8f3dc;
85 }
86 .node { width: 100%; }
87 .stage > .node,
88 .stage > .node.outer { margin: 0; }
89 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
90 .f-page-margins {}
91 </style>
92 </head>
93 <body>
94 <div class="stage"><div class="node f-backgrounds-borders f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
95 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-page-margins"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
96 <div class="stage"><div class="node outer f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
97 </body>
98 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.16% · raw 0.16% (602 px) interactions-cartesian-page-margins-x-transforms · physical-page-context-and-nested-feature-depths · 3 pages PASS via CSS-scale observation: sub-CSS shared-outline coverage Extra extra 0.2% ΔE 32.0
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw candidate adds paint absent from reference (0.2%)
Physical-page-context interaction for page-margins and transforms: the transforms representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
regions (8 total; showing 8 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 7 127 29,32 → 172,103 121 total 0.03% · largest 0.03% Extra 1 475 184,32 → 184,184 475 total 0.1% · largest 0.1%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason Extra 184,32 → 184,184 0.1 candidate adds paint absent from reference (0.1%) AntialiasCoverage 29,32 → 68,32 0.03 ΔRGB(168,97,70) antialiasing coverage residue on a shared outline AntialiasCoverage 172,49 → 172,49 0.000267 ΔRGB(13,12,10) antialiasing coverage residue on a shared outline AntialiasCoverage 172,55 → 172,55 0.000267 ΔRGB(12,11,9) antialiasing coverage residue on a shared outline AntialiasCoverage 42,95 → 42,95 0.000267 ΔRGB(-3,-4,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 101,98 → 101,98 0.000267 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 169,102 → 169,102 0.000267 ΔRGB(-13,-11,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 133,103 → 133,103 0.000267 ΔRGB(-4,-5,-2) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-page-margins-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>page-margins x transforms interaction</title>
6 <style>
7 @page {
8 size: 192px 200px;
9 margin: 16px;
10 background: #ffd6d6;
11 }
12 @page :left { margin: 8px 32px 24px 8px; }
13 @page :right { margin: 16px 8px 8px 32px; }
14 @page :first { margin: 32px 8px 16px 24px; }
15
16 @font-face {
17 font-family: MatrixSans;
18 src: url('../../fonts/ParitySans.ttf') format('truetype');
19 font-style: normal;
20 font-weight: 400;
21 }
22 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
23 * { box-sizing: border-box; margin: 0; }
24 html, body { background: #ffffff; }
25 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
26 .stage {
27 display: inline-flex;
28 width: 156px;
29 min-height: 164px;
30 margin-right: 8px;
31 align-items: center;
32 justify-content: center;
33 background: #f7fafc;
34 border: 1px solid #cbd5e1;
35 font-size: 16px;
36 vertical-align: top;
37 }
38 .stage:last-child { margin-right: 0; }
39 .node {
40 width: 126px;
41 padding: 7px;
42 border: 2px solid #577590;
43 background-color: #e7f5ff;
44 color: #17324d;
45 }
46 .node.inner {
47 width: 58px;
48 height: 48px;
49 padding: 5px;
50 }
51 .node.outer { min-height: 96px; }
52 .own { height: 22px; white-space: nowrap; }
53 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
54 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
55 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
56 .f-images-replaced > .own > .asset { display: inline-block; }
57 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
58 .f-lists-counters > .own > .token { counter-increment: pair-item; }
59 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
60 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
61 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
62 @supports (display:grid) {
63 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
64 }
65 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
66
67 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
68 .stage { display: block; margin: 0; break-before: page; }
69 .stage > .node { min-height: 68px; margin: 47px auto 0; }
70 .stage > .node.outer { margin-top: 33px; }
71
72 /* The three compositions occupy first/right, left, and later-right pages.
73 Their asymmetric page areas expose side selection, cascade, content
74 origin, bottom capacity, and paint that crosses a page-area edge.
75 Horizontal body padding is a distinct root-flow gutter: each stage
76 deliberately shifts through it to the physical page-area start edge. */
77 body { padding-left: 8px; padding-right: 8px; }
78 .stage {
79 width: 152px;
80 height: 128px;
81 min-height: 128px;
82 margin-left: -8px;
83 border: 0;
84 background: #d8f3dc;
85 }
86 .node { width: 100%; }
87 .stage > .node,
88 .stage > .node.outer { margin: 0; }
89 .f-page-margins {}
90 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
91 </style>
92 </head>
93 <body>
94 <div class="stage"><div class="node f-page-margins f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
95 <div class="stage"><div class="node outer f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
96 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-page-margins"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
97 </body>
98 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.14% · raw 0.16% (1587 px) interactions-cartesian-clip-mask-x-units-values · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage Missing missing 0.07% extra 0.07% ΔE 2.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw candidate lacks paint present in reference (0.07%)
Cartesian family interaction for clip-mask and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (336 total; showing 64 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 Missing 7 223 6,48 → 134,116 217 total 0.03% · largest 0.03% ColorErr 321 1119 6,48 → 401,122 120 total 0.1% · largest 0.02% · max ΔE 4.2 Extra 8 245 21,48 → 151,116 122 total 0.03% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason Missing 6,48 → 13,104 0.03 candidate lacks paint present in reference (0.03%) Extra 142,82 → 147,116 0.02 candidate adds paint absent from reference (0.02%) AntialiasCoverage 343,78 → 345,107 0.02 ΔE 3.9 ΔRGB(-51,-46,-40) antialiasing coverage residue on a shared outline Extra 147,53 → 151,82 0.02 candidate adds paint absent from reference (0.02%) AntialiasCoverage 399,74 → 400,96 0.01 ΔE 3.9 ΔRGB(51,46,40) antialiasing coverage residue on a shared outline AntialiasCoverage 346,65 → 347,67 0.001550 ΔRGB(-50,-44,-38) antialiasing coverage residue on a shared outline AntialiasCoverage 397,111 → 398,113 0.001421 ΔRGB(50,44,38) antialiasing coverage residue on a shared outline AntialiasCoverage 401,70 → 401,73 0.001033 ΔRGB(144,128,111) antialiasing coverage residue on a shared outline AntialiasCoverage 13,49 → 13,51 0.000904 ΔE 1.7 ΔRGB(10,3,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 12,57 → 12,59 0.000904 ΔE 3.1 ΔRGB(10,3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 12,60 → 12,61 0.000904 ΔE 3.1 ΔRGB(10,3,-2) antialiasing coverage residue on a shared outline ColorValue 149,61 → 149,63 0.000904 ΔRGB(-99,-84,-70) fill recolour ΔRGB(-99,-84,-70) (ΔE 0) AntialiasCoverage 11,68 → 11,69 0.000904 ΔE 3.1 ΔRGB(10,3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 10,70 → 10,72 0.000904 ΔE 3.1 ΔRGB(10,3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 9,78 → 9,80 0.000904 ΔE 3.1 ΔRGB(10,3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 9,81 → 9,83 0.000904 ΔE 3.1 ΔRGB(10,3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 8,89 → 8,91 0.000904 ΔRGB(10,3,-2) antialiasing coverage residue on a shared outline ColorValue 8,91 → 8,93 0.000904 ΔRGB(99,84,70) fill recolour ΔRGB(+99,+84,+70) (ΔE 0) AntialiasCoverage 7,94 → 7,96 0.000904 ΔRGB(99,84,70) antialiasing coverage residue on a shared outline AntialiasCoverage 7,96 → 7,98 0.000904 ΔRGB(99,84,70) antialiasing coverage residue on a shared outline AntialiasCoverage 7,99 → 7,101 0.000904 ΔRGB(99,84,70) antialiasing coverage residue on a shared outline AntialiasCoverage 6,102 → 6,104 0.000904 ΔRGB(99,84,70) antialiasing coverage residue on a shared outline AntialiasCoverage 6,104 → 6,106 0.000904 ΔRGB(99,84,70) antialiasing coverage residue on a shared outline AntialiasCoverage 12,52 → 12,53 0.000775 ΔE 3.1 ΔRGB(10,3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 12,54 → 12,56 0.000775 ΔE 3.1 ΔRGB(10,3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 150,55 → 150,56 0.000775 ΔRGB(-99,-84,-70) antialiasing coverage residue on a shared outline AntialiasCoverage 150,57 → 150,59 0.000775 ΔRGB(-88,-74,-62) antialiasing coverage residue on a shared outline AntialiasCoverage 149,59 → 149,61 0.000775 ΔRGB(-88,-74,-62) antialiasing coverage residue on a shared outline AntialiasCoverage 11,62 → 11,64 0.000775 ΔE 3.1 ΔRGB(10,3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 11,65 → 11,67 0.000775 ΔE 3.1 ΔRGB(10,3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 148,68 → 148,70 0.000775 ΔE 3.1 ΔRGB(-10,-3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 148,71 → 148,72 0.000775 ΔE 3.1 ΔRGB(-9,-2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 10,73 → 10,75 0.000775 ΔE 3.1 ΔRGB(10,3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 148,73 → 148,75 0.000775 ΔE 3.1 ΔRGB(-8,-2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 10,76 → 10,77 0.000775 ΔE 3.1 ΔRGB(10,3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 147,80 → 147,82 0.000775 ΔE 3.6 ΔRGB(-10,-3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 146,82 → 146,84 0.000775 ΔE 3.1 ΔRGB(-9,-2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 9,84 → 9,85 0.000775 ΔE 3.1 ΔRGB(10,3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 146,84 → 146,86 0.000775 ΔE 3.1 ΔRGB(-8,-2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 8,86 → 8,88 0.000775 ΔE 4.2 ΔRGB(10,3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 146,87 → 146,88 0.000775 ΔE 3.1 ΔRGB(-6,-2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 145,94 → 145,95 0.000775 ΔE 3.1 ΔRGB(-9,-2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 144,96 → 144,98 0.000775 ΔE 3.1 ΔRGB(-8,-2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 144,98 → 144,100 0.000775 ΔE 3.1 ΔRGB(-8,-2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 143,105 → 143,107 0.000775 ΔE 3.1 ΔRGB(-9,-2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 143,108 → 143,109 0.000775 ΔE 3.1 ΔRGB(-9,-2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 142,110 → 142,111 0.000775 ΔE 3.1 ΔRGB(-8,-2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 142,112 → 142,114 0.000775 ΔE 2.0 ΔRGB(-10,-3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 12,50 → 12,51 0.000646 ΔE 2.0 ΔRGB(3,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 11,60 → 11,62 0.000646 ΔE 1.0 ΔRGB(3,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 149,64 → 149,65 0.000646 ΔRGB(-10,-3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 148,66 → 148,68 0.000646 ΔE 3.6 ΔRGB(-10,-3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 10,71 → 10,72 0.000646 ΔE 1.0 ΔRGB(3,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 147,76 → 147,77 0.000646 ΔE 3.1 ΔRGB(-10,-3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 147,78 → 147,79 0.000646 ΔE 3.1 ΔRGB(-10,-3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 145,89 → 145,91 0.000646 ΔE 3.1 ΔRGB(-10,-3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 145,92 → 145,93 0.000646 ΔE 3.1 ΔRGB(-10,-3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 144,101 → 144,102 0.000646 ΔE 3.1 ΔRGB(-10,-3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 143,103 → 143,104 0.000646 ΔE 3.1 ΔRGB(-10,-3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 12,53 → 12,54 0.000517 ΔE 1.5 ΔRGB(5,2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 150,53 → 150,54 0.000517 ΔRGB(-119,-100,-83) antialiasing coverage residue on a shared outline AntialiasCoverage 12,55 → 12,56 0.000517 ΔE 1.2 ΔRGB(4,2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 11,58 → 11,59 0.000517 ΔE 1.0 ΔRGB(3,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 11,63 → 11,64 0.000517 ΔE 1.5 ΔRGB(5,2,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-units-values.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x units-values interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-units-values {width:calc(100% - 9px);padding-left:5%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-units-values"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.15% · raw 0.15% (579 px) interactions-cartesian-overflow-clipping-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages PASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 4.4
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Physical-page-context interaction for page-margins and overflow-clipping: the overflow-clipping representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
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 579 24,32 → 167,91 421 total 0.2% · largest 0.1%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 33,32 → 167,32 0.1 ΔRGB(22,13,9) antialiasing coverage residue on a shared outline AntialiasCoverage 24,41 → 24,91 0.04 ΔRGB(22,13,9) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-overflow-clipping-x-page-margins.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>overflow-clipping x page-margins interaction</title>
6 <style>
7 @page {
8 size: 192px 200px;
9 margin: 16px;
10 background: #ffd6d6;
11 }
12 @page :left { margin: 8px 32px 24px 8px; }
13 @page :right { margin: 16px 8px 8px 32px; }
14 @page :first { margin: 32px 8px 16px 24px; }
15
16 @font-face {
17 font-family: MatrixSans;
18 src: url('../../fonts/ParitySans.ttf') format('truetype');
19 font-style: normal;
20 font-weight: 400;
21 }
22 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
23 * { box-sizing: border-box; margin: 0; }
24 html, body { background: #ffffff; }
25 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
26 .stage {
27 display: inline-flex;
28 width: 156px;
29 min-height: 164px;
30 margin-right: 8px;
31 align-items: center;
32 justify-content: center;
33 background: #f7fafc;
34 border: 1px solid #cbd5e1;
35 font-size: 16px;
36 vertical-align: top;
37 }
38 .stage:last-child { margin-right: 0; }
39 .node {
40 width: 126px;
41 padding: 7px;
42 border: 2px solid #577590;
43 background-color: #e7f5ff;
44 color: #17324d;
45 }
46 .node.inner {
47 width: 58px;
48 height: 48px;
49 padding: 5px;
50 }
51 .node.outer { min-height: 96px; }
52 .own { height: 22px; white-space: nowrap; }
53 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
54 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
55 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
56 .f-images-replaced > .own > .asset { display: inline-block; }
57 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
58 .f-lists-counters > .own > .token { counter-increment: pair-item; }
59 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
60 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
61 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
62 @supports (display:grid) {
63 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
64 }
65 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
66
67 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
68 .stage { display: block; margin: 0; break-before: page; }
69 .stage > .node { min-height: 68px; margin: 47px auto 0; }
70 .stage > .node.outer { margin-top: 33px; }
71
72 /* The three compositions occupy first/right, left, and later-right pages.
73 Their asymmetric page areas expose side selection, cascade, content
74 origin, bottom capacity, and paint that crosses a page-area edge.
75 Horizontal body padding is a distinct root-flow gutter: each stage
76 deliberately shifts through it to the physical page-area start edge. */
77 body { padding-left: 8px; padding-right: 8px; }
78 .stage {
79 width: 152px;
80 height: 128px;
81 min-height: 128px;
82 margin-left: -8px;
83 border: 0;
84 background: #d8f3dc;
85 }
86 .node { width: 100%; }
87 .stage > .node,
88 .stage > .node.outer { margin: 0; }
89 .f-overflow-clipping {overflow:hidden;max-height:58px;border-radius:9px;}
90 .f-page-margins {}
91 </style>
92 </head>
93 <body>
94 <div class="stage"><div class="node f-overflow-clipping f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
95 <div class="stage"><div class="node outer f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-page-margins"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
96 <div class="stage"><div class="node outer f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-overflow-clipping"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
97 </body>
98 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.15% · raw 0.15% (1538 px) interactions-cartesian-images-replaced-x-inline-text · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 33.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for images-replaced and inline-text: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (16 total; showing 16 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 16 1538 24,43 → 387,89 228 total 0.2% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 74,57 → 75,81 0.03 ΔRGB(190,110,30) antialiasing coverage residue on a shared outline AntialiasCoverage 32,68 → 38,76 0.02 ΔRGB(15,14,13) antialiasing coverage residue on a shared outline AntialiasCoverage 24,66 → 31,75 0.02 ΔRGB(16,15,13) antialiasing coverage residue on a shared outline AntialiasCoverage 368,48 → 377,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 204,77 → 212,89 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 381,51 → 387,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 381,52 → 386,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 370,54 → 375,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,83 → 211,88 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 244,43 → 244,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 370,49 → 375,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 206,78 → 211,82 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 26,67 → 29,72 0.007621 ΔRGB(-23,-22,-20) antialiasing coverage residue on a shared outline AntialiasCoverage 33,74 → 38,77 0.005038 ΔRGB(-75,-70,-64) antialiasing coverage residue on a shared outline AntialiasCoverage 379,48 → 381,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 379,60 → 381,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-images-replaced-x-inline-text.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>images-replaced x inline-text interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-images-replaced {}
61 .f-inline-text {line-height:1.35;word-spacing:5px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-images-replaced f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.15% · raw 0.15% (1523 px) interactions-cartesian-inline-text-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 22.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for inline-text and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (17 total; showing 17 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 17 1523 44,48 → 413,88 194 total 0.2% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 44,61 → 53,74 0.03 ΔRGB(-13,-12,-11) antialiasing coverage residue on a shared outline AntialiasCoverage 371,76 → 380,88 0.03 ΔRGB(-13,-12,-11) antialiasing coverage residue on a shared outline AntialiasCoverage 55,62 → 63,75 0.02 ΔRGB(-6,-6,-5) antialiasing coverage residue on a shared outline AntialiasCoverage 204,48 → 212,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 217,51 → 223,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 217,52 → 222,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 57,67 → 62,74 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 46,68 → 51,72 0.01 ΔRGB(14,13,11) antialiasing coverage residue on a shared outline AntialiasCoverage 373,82 → 378,87 0.01 ΔRGB(14,13,11) antialiasing coverage residue on a shared outline AntialiasCoverage 46,63 → 51,67 0.01 ΔRGB(6,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 373,77 → 378,82 0.01 ΔRGB(6,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 206,54 → 211,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,49 → 211,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 215,48 → 217,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 215,60 → 217,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 413,86 → 413,86 0.000129 ΔRGB(13,11,9) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-inline-text-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>inline-text x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-inline-text {line-height:1.35;word-spacing:5px;}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-inline-text f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.15% · raw 0.15% (1516 px) interactions-cartesian-transforms-x-units-values · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 28.2
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for transforms and units-values: both representatives compose on one element and in both outer/inner orders. Percentage sizing and transform origins resolve against each box before cumulative transform matrices map the painted descendants.
regions (9 total; showing 9 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 9 1516 19,58 → 249,86 490 total 0.2% · largest 0.06%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 31,61 → 40,74 0.06 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 19,58 → 30,70 0.03 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 52,60 → 61,73 0.03 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 42,60 → 51,71 0.03 ΔRGB(12,11,10) antialiasing coverage residue on a shared outline AntialiasCoverage 54,65 → 60,71 0.01 ΔRGB(2,2,2) antialiasing coverage residue on a shared outline AntialiasCoverage 23,60 → 27,65 0.01 ΔRGB(11,10,9) antialiasing coverage residue on a shared outline AntialiasCoverage 44,66 → 49,70 0.01 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 44,61 → 49,65 0.009559 ΔRGB(-5,-5,-5) antialiasing coverage residue on a shared outline AntialiasCoverage 249,86 → 249,86 0.000129 ΔRGB(-8,-7,-6) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-transforms-x-units-values.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>transforms x units-values interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
61 .f-units-values {width:calc(100% - 9px);padding-left:5%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-transforms f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-units-values"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.14% · raw 0.14% (1456 px) interactions-cartesian-inline-text-x-units-values · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 27.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for inline-text and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (17 total; showing 17 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 17 1456 31,48 → 368,89 229 total 0.2% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 359,77 → 368,89 0.03 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 204,48 → 212,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 31,62 → 40,74 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 217,51 → 223,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 44,65 → 50,74 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 361,83 → 366,88 0.01 ΔRGB(-10,-10,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 217,52 → 222,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 44,66 → 49,73 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 361,78 → 366,82 0.01 ΔRGB(-3,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 206,54 → 211,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 33,68 → 38,73 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,49 → 211,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 33,63 → 38,67 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 215,48 → 217,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 43,62 → 44,62 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 215,60 → 217,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 43,74 → 44,74 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-inline-text-x-units-values.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>inline-text x units-values interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-inline-text {line-height:1.35;word-spacing:5px;}
61 .f-units-values {width:calc(100% - 9px);padding-left:5%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-inline-text f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-units-values"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.13% · raw 0.14% (1453 px) interactions-cartesian-effects-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.007277% extra 0.001399% ΔE 1.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (19 total; showing 19 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 9 1422 25,36 → 408,93 381 total 0.2% · largest 0.05% · max ΔE 1.9 Extra 1 5 395,62 → 395,64 5 total 0.000646% · largest 0.000646% Missing 9 26 66,63 → 382,93 5 total 0.003359% · largest 0.000646%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 25,76 → 67,78 0.04 ΔE 1.6 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 354,67 → 408,67 0.02 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 360,91 → 382,93 0.02 ΔE 1.6 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 196,91 → 218,93 0.02 ΔE 1.6 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 207,92 → 207,92 0.000775 ΔE 1.7 ΔRGB(5,3,0) antialiasing coverage residue on a shared outline Missing 196,92 → 196,93 0.000646 candidate lacks paint present in reference (0.000646%) Extra 395,62 → 395,64 0.000646 candidate adds paint absent from reference (0.000646%) Missing 381,91 → 382,91 0.000517 candidate lacks paint present in reference (0.000517%) Missing 360,92 → 360,93 0.000517 candidate lacks paint present in reference (0.000517%) Missing 353,63 → 353,64 0.000388 candidate lacks paint present in reference (0.000388%) Missing 66,76 → 67,76 0.000388 candidate lacks paint present in reference (0.000388%) Missing 217,91 → 218,91 0.000388 candidate lacks paint present in reference (0.000388%) AntialiasCoverage 196,92 → 196,92 0.000388 ΔE 1.3 ΔRGB(4,2,0) antialiasing coverage residue on a shared outline Missing 207,93 → 207,93 0.000258 candidate lacks paint present in reference (0.000258%) Missing 371,93 → 371,93 0.000129 candidate lacks paint present in reference (0.000129%) Missing 382,93 → 382,93 0.000129 candidate lacks paint present in reference (0.000129%)
source · cases/interactions/interactions-cartesian-effects-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.14% · raw 0.14% (1397 px) interactions-cartesian-positioning-x-typography · same-element-and-bidirectional-nestingPASS via CSS-scale observation: predominant shared-outline coverage ColorValue ΔE 46.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill recolour ΔRGB(-4,-4,-3) (ΔE 46.6)
Cartesian family interaction for positioning and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (16 total; showing 16 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 16 1397 111,88 → 403,105 221 total 0.2% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 126,91 → 134,105 0.03 ΔRGB(-181,-170,-155) fill recolour ΔRGB(-181,-170,-155) (ΔE 0) ColorValue 126,96 → 132,103 0.02 ΔRGB(4,4,3) fill recolour ΔRGB(+4,+4,+3) (ΔE 0) AntialiasCoverage 398,88 → 403,102 0.02 ΔRGB(-119,-112,-102) antialiasing coverage residue on a shared outline AntialiasCoverage 117,92 → 122,105 0.02 ΔRGB(-119,-112,-102) antialiasing coverage residue on a shared outline AntialiasCoverage 124,91 → 124,105 0.02 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 392,88 → 393,102 0.02 ΔRGB(134,126,115) antialiasing coverage residue on a shared outline AntialiasCoverage 111,92 → 112,105 0.02 ΔRGB(134,126,115) antialiasing coverage residue on a shared outline AntialiasCoverage 397,96 → 400,100 0.006588 ΔRGB(89,84,76) antialiasing coverage residue on a shared outline AntialiasCoverage 116,99 → 119,103 0.006588 ΔRGB(89,84,76) antialiasing coverage residue on a shared outline AntialiasCoverage 397,90 → 400,93 0.005296 ΔRGB(74,69,63) antialiasing coverage residue on a shared outline AntialiasCoverage 116,93 → 119,97 0.005296 ΔRGB(74,69,63) antialiasing coverage residue on a shared outline AntialiasCoverage 395,96 → 395,100 0.003617 ΔRGB(-208,-195,-178) antialiasing coverage residue on a shared outline AntialiasCoverage 114,99 → 114,103 0.003617 ΔRGB(-208,-195,-178) antialiasing coverage residue on a shared outline AntialiasCoverage 395,90 → 395,93 0.002842 ΔRGB(-208,-195,-178) antialiasing coverage residue on a shared outline AntialiasCoverage 114,93 → 114,97 0.002842 ΔRGB(-208,-195,-178) antialiasing coverage residue on a shared outline AntialiasCoverage 126,104 → 129,105 0.002454 ΔRGB(62,58,53) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-positioning-x-typography.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>positioning x typography interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-positioning {position:relative;}
61 .f-typography {font-size:18px;font-weight:700;letter-spacing:.7px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-positioning f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-typography"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-positioning"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.13% · raw 0.14% (513 px) interactions-cartesian-inline-text-x-paged-media · same-element-and-bidirectional-nesting · 4 pages PASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 25.3
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for inline-text and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (7 total; showing 7 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 7 513 40,62 → 59,74 143 total 0.2% · largest 0.06%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 40,62 → 49,74 0.06 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 53,65 → 59,74 0.04 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 53,66 → 58,73 0.04 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 42,68 → 47,73 0.03 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,63 → 47,67 0.03 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 51,62 → 53,62 0.004813 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 51,74 → 53,74 0.002406 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-inline-text-x-paged-media.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>inline-text x paged-media interaction</title>
6 <style>
7 @page { size: 192px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 min-height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 padding: 7px;
35 border: 2px solid #577590;
36 background-color: #e7f5ff;
37 color: #17324d;
38 }
39 .node.inner {
40 width: 58px;
41 height: 48px;
42 padding: 5px;
43 }
44 .node.outer { min-height: 96px; }
45 .own { height: 22px; white-space: nowrap; }
46 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
47 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
48 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
49 .f-images-replaced > .own > .asset { display: inline-block; }
50 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
51 .f-lists-counters > .own > .token { counter-increment: pair-item; }
52 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
53 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
54 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
55 @supports (display:grid) {
56 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
57 }
58 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
59
60 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
61 .stage { display: block; margin: 0; break-before: page; }
62 .stage > .node { min-height: 68px; margin: 47px auto 0; }
63 .stage > .node.outer { margin-top: 33px; }
64 .f-inline-text {line-height:1.35;word-spacing:5px;}
65 .f-paged-media {break-before:page;break-inside:avoid;}
66 </style>
67 </head>
68 <body>
69 <div class="stage"><div class="node f-inline-text f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
70 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-paged-media"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
71 <div class="stage"><div class="node outer f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
72 </body>
73 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.13% · raw 0.13% (1367 px) interactions-cartesian-inline-text-x-positioning · same-element-and-bidirectional-nestingPASS via CSS-scale observation: predominant shared-outline coverage ColorValue ΔE 29.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill recolour ΔRGB(+2,+2,+2) (ΔE 29.1)
Cartesian family interaction for inline-text and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (12 total; showing 12 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 12 1367 24,48 → 376,89 295 total 0.2% · largest 0.04%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 32,61 → 38,71 0.04 ΔRGB(3,3,3) fill recolour ΔRGB(+3,+3,+3) (ΔE 0) ColorValue 24,59 → 31,68 0.03 ΔRGB(9,9,8) fill recolour ΔRGB(+9,+9,+8) (ΔE 0) AntialiasCoverage 204,48 → 212,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 368,77 → 376,89 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 217,51 → 223,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 217,52 → 222,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 206,54 → 211,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,83 → 375,88 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,49 → 211,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 370,78 → 374,82 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 215,48 → 217,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 215,60 → 217,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-inline-text-x-positioning.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>inline-text x positioning interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-inline-text {line-height:1.35;word-spacing:5px;}
61 .f-positioning {position:relative;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-inline-text f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-positioning"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.12% · raw 0.13% (1360 px) interactions-cartesian-lists-counters-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.02% extra 0.002704% ΔE 1.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for lists-counters and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (33 total; showing 33 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 13 1301 25,56 → 412,93 472 total 0.2% · largest 0.06% · max ΔE 2.2 Extra 2 9 395,62 → 412,92 5 total 0.001163% · largest 0.000646% Missing 18 50 35,63 → 412,93 13 total 0.006459% · largest 0.001679%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 25,77 → 98,78 0.06 ΔE 1.6 ΔRGB(3,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,91 → 412,93 0.05 ΔE 1.6 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 196,91 → 218,93 0.02 ΔE 1.6 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 236,56 → 236,58 0.001808 ΔRGB(-5,-69,-73) antialiasing coverage residue on a shared outline AntialiasCoverage 237,56 → 238,58 0.001808 ΔRGB(8,102,107) antialiasing coverage residue on a shared outline Missing 97,76 → 98,78 0.001679 candidate lacks paint present in reference (0.001679%) AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline Missing 408,93 → 410,93 0.000775 candidate lacks paint present in reference (0.000775%) AntialiasCoverage 98,76 → 98,78 0.000775 ΔE 0.5 ΔRGB(-2,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 207,92 → 207,92 0.000775 ΔE 1.7 ΔRGB(5,3,0) antialiasing coverage residue on a shared outline AntialiasCoverage 375,92 → 375,92 0.000775 ΔE 2.2 ΔRGB(7,3,0) antialiasing coverage residue on a shared outline Missing 196,92 → 196,93 0.000646 candidate lacks paint present in reference (0.000646%) Extra 395,62 → 395,64 0.000646 candidate adds paint absent from reference (0.000646%) Missing 360,92 → 360,93 0.000517 candidate lacks paint present in reference (0.000517%) Extra 412,92 → 412,92 0.000517 candidate adds paint absent from reference (0.000517%) Missing 353,63 → 353,64 0.000388 candidate lacks paint present in reference (0.000388%) Missing 217,91 → 218,91 0.000388 candidate lacks paint present in reference (0.000388%) Missing 412,91 → 412,91 0.000388 candidate lacks paint present in reference (0.000388%) AntialiasCoverage 97,75 → 97,76 0.000388 ΔRGB(-8,174,144) antialiasing coverage residue on a shared outline AntialiasCoverage 196,92 → 196,92 0.000388 ΔE 1.3 ΔRGB(4,2,0) antialiasing coverage residue on a shared outline Missing 207,93 → 207,93 0.000258 candidate lacks paint present in reference (0.000258%) Missing 375,93 → 375,93 0.000258 candidate lacks paint present in reference (0.000258%) AntialiasCoverage 97,76 → 97,76 0.000258 ΔRGB(5,2,0) antialiasing coverage residue on a shared outline Missing 35,78 → 35,78 0.000129 candidate lacks paint present in reference (0.000129%) Missing 40,78 → 40,78 0.000129 candidate lacks paint present in reference (0.000129%) Missing 61,78 → 61,78 0.000129 candidate lacks paint present in reference (0.000129%) Missing 71,78 → 71,78 0.000129 candidate lacks paint present in reference (0.000129%) Missing 76,78 → 76,78 0.000129 candidate lacks paint present in reference (0.000129%) Missing 370,93 → 370,93 0.000129 candidate lacks paint present in reference (0.000129%) Missing 386,93 → 386,93 0.000129 candidate lacks paint present in reference (0.000129%) Missing 396,93 → 396,93 0.000129 candidate lacks paint present in reference (0.000129%) Missing 402,93 → 402,93 0.000129 candidate lacks paint present in reference (0.000129%)
source · cases/interactions/interactions-cartesian-lists-counters-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>lists-counters x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-lists-counters {counter-reset:pair-item;}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-lists-counters f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.13% · raw 0.13% (1322 px) interactions-cartesian-backgrounds-borders-x-inline-text · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 25.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and inline-text: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (22 total; showing 22 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 22 1322 17,48 → 387,110 143 total 0.2% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 368,48 → 377,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 41,63 → 50,75 0.02 ΔRGB(-8,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 205,78 → 213,90 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 381,51 → 387,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 54,66 → 60,75 0.01 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 381,52 → 386,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 54,67 → 59,74 0.01 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 370,54 → 375,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 43,69 → 48,74 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 207,84 → 212,89 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,49 → 375,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 43,64 → 48,68 0.009171 ΔRGB(3,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 207,79 → 212,83 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 379,48 → 381,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 52,63 → 54,63 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 379,60 → 381,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 52,75 → 54,75 0.000775 ΔRGB(197,188,178) antialiasing coverage residue on a shared outline AntialiasCoverage 17,57 → 17,57 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,68 → 362,68 0.000129 ΔRGB(6,7,5) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,110 → 362,110 0.000129 ΔRGB(15,14,12) antialiasing coverage residue on a shared outline AntialiasCoverage 361,110 → 361,110 0.000129 ΔRGB(-9,-8,-8) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-inline-text.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x inline-text interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-inline-text {line-height:1.35;word-spacing:5px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.13% · raw 0.13% (1319 px) interactions-cartesian-clip-mask-x-inline-text · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 0.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and inline-text: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (19 total; showing 19 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 19 1319 40,48 → 387,122 143 total 0.2% · largest 0.02% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 368,48 → 377,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 40,62 → 49,74 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 204,77 → 212,89 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 381,51 → 387,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 53,65 → 59,74 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 381,52 → 386,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 53,66 → 58,73 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 370,54 → 375,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,68 → 47,73 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,83 → 211,88 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,49 → 375,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 42,63 → 47,67 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 206,78 → 211,82 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 379,48 → 381,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 51,62 → 53,62 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 379,60 → 381,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 51,74 → 53,74 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 192,120 → 192,120 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 218,122 → 218,122 0.000129 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-inline-text.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x inline-text interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-inline-text {line-height:1.35;word-spacing:5px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.13% · raw 0.13% (1317 px) interactions-cartesian-block-box-model-x-inline-text · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 25.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for block-box-model and inline-text: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (17 total; showing 17 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 17 1317 40,48 → 387,93 143 total 0.2% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 368,48 → 377,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 40,66 → 49,78 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 204,81 → 212,93 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 381,51 → 387,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 53,69 → 59,78 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 381,52 → 386,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 53,70 → 58,77 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 370,54 → 375,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,72 → 47,76 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,87 → 211,92 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,49 → 375,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 42,67 → 47,71 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 206,82 → 211,86 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 379,48 → 381,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 51,66 → 53,66 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 379,60 → 381,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 51,78 → 53,78 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-block-box-model-x-inline-text.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>block-box-model x inline-text interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-block-box-model {box-sizing:border-box;padding:11px 7px;min-width:92px;max-width:132px;}
61 .f-inline-text {line-height:1.35;word-spacing:5px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-block-box-model f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-block-box-model"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-block-box-model"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.13% · raw 0.13% (1317 px) interactions-cartesian-inline-text-x-multicol · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 25.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for inline-text and multicol: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (17 total; showing 17 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 17 1317 40,48 → 434,74 143 total 0.2% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 204,48 → 212,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 426,55 → 434,67 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 40,62 → 49,74 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 217,51 → 223,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 53,65 → 59,74 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 217,52 → 222,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 53,66 → 58,73 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 206,54 → 211,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 427,61 → 432,66 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,68 → 47,73 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,49 → 211,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 427,56 → 432,60 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 42,63 → 47,67 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 215,48 → 217,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 51,62 → 53,62 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 215,60 → 217,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 51,74 → 53,74 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-inline-text-x-multicol.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>inline-text x multicol interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-inline-text {line-height:1.35;word-spacing:5px;}
61 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-inline-text f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.13% · raw 0.13% (1317 px) interactions-cartesian-inline-text-x-selectors-cascade · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 25.2
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for inline-text and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (17 total; showing 17 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 17 1317 40,48 → 376,89 143 total 0.2% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 204,48 → 212,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 40,62 → 49,74 0.02 ΔRGB(-2,-9,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 368,77 → 376,89 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 217,51 → 223,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 53,65 → 59,74 0.01 ΔRGB(1,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 217,52 → 222,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 53,66 → 58,73 0.01 ΔRGB(0,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 206,54 → 211,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 42,68 → 47,73 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,83 → 375,88 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,49 → 211,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 42,63 → 47,67 0.009171 ΔRGB(0,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 370,78 → 374,82 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 215,48 → 217,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 51,62 → 53,62 0.001550 ΔRGB(-1,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 215,60 → 217,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 51,74 → 53,74 0.000775 ΔRGB(38,227,224) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-inline-text-x-selectors-cascade.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>inline-text x selectors-cascade interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-inline-text {line-height:1.35;word-spacing:5px;}
61 .f-selectors-cascade {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-inline-text f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-selectors-cascade"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.12% · raw 0.12% (1260 px) interactions-cartesian-tables-x-typography · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 44.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for tables and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (15 total; showing 15 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 15 1260 59,66 → 392,95 190 total 0.2% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 74,66 → 82,80 0.02 ΔRGB(118,110,101) antialiasing coverage residue on a shared outline AntialiasCoverage 64,66 → 69,80 0.02 ΔRGB(119,112,102) antialiasing coverage residue on a shared outline AntialiasCoverage 387,81 → 392,95 0.02 ΔRGB(119,112,102) antialiasing coverage residue on a shared outline AntialiasCoverage 74,71 → 79,78 0.02 ΔRGB(4,4,3) antialiasing coverage residue on a shared outline AntialiasCoverage 59,66 → 59,80 0.02 ΔRGB(-134,-126,-115) antialiasing coverage residue on a shared outline AntialiasCoverage 381,81 → 382,95 0.02 ΔRGB(-134,-126,-115) antialiasing coverage residue on a shared outline AntialiasCoverage 72,66 → 72,80 0.01 ΔRGB(-208,-195,-178) antialiasing coverage residue on a shared outline AntialiasCoverage 64,74 → 67,78 0.006588 ΔRGB(-89,-84,-76) antialiasing coverage residue on a shared outline AntialiasCoverage 387,89 → 389,93 0.006588 ΔRGB(-89,-84,-76) antialiasing coverage residue on a shared outline AntialiasCoverage 63,68 → 66,71 0.005296 ΔRGB(-74,-69,-63) antialiasing coverage residue on a shared outline AntialiasCoverage 386,83 → 389,86 0.005296 ΔRGB(-74,-69,-63) antialiasing coverage residue on a shared outline AntialiasCoverage 61,74 → 61,78 0.003617 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 384,89 → 384,93 0.003617 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 61,68 → 61,71 0.002842 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 384,83 → 384,86 0.002842 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-tables-x-typography.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>tables x typography interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-tables {display:table;border-collapse:separate;border-spacing:3px;}
61 .f-typography {font-size:18px;font-weight:700;letter-spacing:.7px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-tables f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-typography"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-tables"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.08% · raw 0.12% (1254 px) interactions-cartesian-clip-mask-x-color-opacity · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.004826% extra 0.08% ΔE 2.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and color-opacity: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (226 total; showing 64 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 177 1003 15,48 → 218,122 38 total 0.1% · largest 0.004909% · max ΔE 2.7 Extra 39 236 15,48 → 140,108 15 total 0.03% · largest 0.001938% Missing 10 15 134,53 → 141,113 6 total 0.001938% · largest 0.000775%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 209,81 → 212,85 0.004909 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 207,75 → 207,86 0.004650 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 209,76 → 212,80 0.003875 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 197,84 → 203,84 0.002971 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline Extra 23,48 → 28,48 0.001938 candidate adds paint absent from reference (0.001938%) Extra 30,48 → 35,48 0.001938 candidate adds paint absent from reference (0.001938%) Extra 37,49 → 42,49 0.001938 candidate adds paint absent from reference (0.001938%) Extra 44,49 → 49,49 0.001938 candidate adds paint absent from reference (0.001938%) Extra 52,49 → 56,49 0.001938 candidate adds paint absent from reference (0.001938%) Extra 59,50 → 63,50 0.001938 candidate adds paint absent from reference (0.001938%) AntialiasCoverage 198,82 → 202,82 0.001679 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 207,75 → 211,75 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 15,108 → 18,108 0.001550 ΔE 1.6 ΔRGB(75,65,54) antialiasing coverage residue on a shared outline AntialiasCoverage 20,108 → 23,108 0.001550 ΔE 2.7 ΔRGB(8,2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 24,108 → 28,108 0.001550 ΔE 2.7 ΔRGB(8,2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 29,109 → 32,109 0.001550 ΔE 2.7 ΔRGB(8,2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 33,109 → 37,109 0.001550 ΔE 2.7 ΔRGB(8,2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 38,109 → 42,109 0.001550 ΔE 2.7 ΔRGB(8,2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 43,110 → 46,110 0.001550 ΔE 2.7 ΔRGB(8,2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 47,110 → 51,110 0.001550 ΔE 2.7 ΔRGB(8,2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 52,110 → 55,110 0.001550 ΔE 2.7 ΔRGB(8,2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 57,111 → 60,111 0.001550 ΔE 2.7 ΔRGB(8,2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 66,111 → 69,111 0.001550 ΔE 2.7 ΔRGB(8,2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 75,112 → 79,112 0.001550 ΔE 2.7 ΔRGB(8,2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 84,113 → 88,113 0.001550 ΔE 2.7 ΔRGB(8,2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 94,113 → 97,113 0.001550 ΔE 2.7 ΔRGB(8,2,-2) antialiasing coverage residue on a shared outline ColorValue 103,114 → 107,114 0.001550 ΔRGB(75,65,54) fill recolour ΔRGB(+75,+65,+54) (ΔE 0) AntialiasCoverage 112,115 → 116,115 0.001550 ΔRGB(75,65,54) antialiasing coverage residue on a shared outline AntialiasCoverage 122,115 → 125,115 0.001550 ΔRGB(75,65,54) antialiasing coverage residue on a shared outline AntialiasCoverage 67,50 → 70,50 0.001421 ΔE 1.0 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 74,50 → 77,50 0.001421 ΔE 1.0 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 81,51 → 84,51 0.001421 ΔE 1.0 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 88,51 → 92,51 0.001421 ΔE 1.0 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 95,51 → 99,51 0.001421 ΔE 1.0 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 102,52 → 106,52 0.001421 ΔE 1.0 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 109,52 → 113,52 0.001421 ΔE 1.0 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 116,52 → 120,52 0.001421 ΔE 1.0 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 124,52 → 127,52 0.001421 ΔE 1.0 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 131,53 → 134,53 0.001421 ΔE 1.0 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 61,111 → 65,111 0.001421 ΔE 2.7 ΔRGB(8,2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 71,112 → 74,112 0.001421 ΔE 2.7 ΔRGB(8,2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 80,112 → 83,112 0.001421 ΔE 2.7 ΔRGB(8,2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 89,113 → 92,113 0.001421 ΔE 2.7 ΔRGB(8,2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 99,114 → 102,114 0.001421 ΔE 2.7 ΔRGB(8,2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 108,114 → 111,114 0.001421 ΔRGB(75,65,54) antialiasing coverage residue on a shared outline AntialiasCoverage 117,115 → 120,115 0.001421 ΔRGB(75,65,54) antialiasing coverage residue on a shared outline AntialiasCoverage 126,116 → 130,116 0.001421 ΔRGB(75,65,54) antialiasing coverage residue on a shared outline AntialiasCoverage 199,75 → 201,76 0.001292 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 212,75 → 214,76 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 200,76 → 200,78 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline Extra 17,89 → 17,91 0.000904 candidate adds paint absent from reference (0.000904%) Extra 16,92 → 16,94 0.000904 candidate adds paint absent from reference (0.000904%) Extra 16,95 → 16,97 0.000904 candidate adds paint absent from reference (0.000904%) Extra 16,99 → 16,100 0.000904 candidate adds paint absent from reference (0.000904%) Extra 15,101 → 15,103 0.000904 candidate adds paint absent from reference (0.000904%) Extra 15,105 → 15,107 0.000904 candidate adds paint absent from reference (0.000904%) AntialiasCoverage 140,56 → 140,58 0.000904 ΔRGB(75,65,54) antialiasing coverage residue on a shared outline AntialiasCoverage 140,58 → 140,60 0.000904 ΔRGB(75,65,54) antialiasing coverage residue on a shared outline AntialiasCoverage 140,64 → 140,66 0.000904 ΔRGB(75,65,54) antialiasing coverage residue on a shared outline ColorValue 139,66 → 139,68 0.000904 ΔRGB(75,65,54) fill recolour ΔRGB(+75,+65,+54) (ΔE 0) ColorValue 139,69 → 139,71 0.000904 ΔRGB(64,54,44) fill recolour ΔRGB(+64,+54,+44) (ΔE 0) AntialiasCoverage 138,77 → 138,79 0.000904 ΔE 2.7 ΔRGB(8,2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 215,77 → 215,78 0.000904 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 138,79 → 138,81 0.000904 ΔE 2.7 ΔRGB(8,2,-2) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-color-opacity.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x color-opacity interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-color-opacity {color:#5a189a;opacity:.76;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.12% · raw 0.12% (1234 px) interactions-cartesian-inline-text-x-tables · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 24.4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for inline-text and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (14 total; showing 14 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 14 1234 30,48 → 379,92 186 total 0.2% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 38,67 → 44,75 0.02 ΔRGB(-15,-13,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 30,65 → 37,74 0.02 ΔRGB(-15,-14,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 204,48 → 212,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 371,80 → 379,92 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 217,51 → 223,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 217,52 → 222,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 206,54 → 211,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 372,86 → 378,91 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,49 → 211,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 372,81 → 377,85 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 32,66 → 35,71 0.007621 ΔRGB(23,22,20) antialiasing coverage residue on a shared outline AntialiasCoverage 39,73 → 44,76 0.005038 ΔRGB(75,70,64) antialiasing coverage residue on a shared outline AntialiasCoverage 215,48 → 217,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 215,60 → 217,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-inline-text-x-tables.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>inline-text x tables interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-inline-text {line-height:1.35;word-spacing:5px;}
61 .f-tables {display:table;border-collapse:separate;border-spacing:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-inline-text f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-tables"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.07% · raw 0.12% (453 px) interactions-cartesian-page-margins-x-text-advanced · physical-page-context-and-nested-feature-depths · 3 pages PASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.05% ΔE 0.7
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff why: page 3: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Physical-page-context interaction for page-margins and text-advanced: the text-advanced representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
regions (7 total; showing 7 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 Missing 3 143 42,44 → 84,75 132 total 0.04% · largest 0.04% ColorErr 4 310 42,44 → 84,75 154 total 0.08% · largest 0.04% · max ΔE 0.8
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 49,73 → 71,75 0.04 ΔE 0.8 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 42,44 → 84,46 0.04 ΔE 0.5 ΔRGB(-2,-1,0) antialiasing coverage residue on a shared outline Missing 42,46 → 84,46 0.04 candidate lacks paint present in reference (0.04%) Missing 70,73 → 71,75 0.002133 candidate lacks paint present in reference (0.002133%) AntialiasCoverage 42,45 → 42,45 0.001067 ΔRGB(5,2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 63,45 → 63,45 0.001067 ΔRGB(6,3,0) antialiasing coverage residue on a shared outline Missing 83,44 → 84,44 0.000800 candidate lacks paint present in reference (0.000800%)
source · cases/interactions/interactions-cartesian-page-margins-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>page-margins x text-advanced interaction</title>
6 <style>
7 @page {
8 size: 192px 200px;
9 margin: 16px;
10 background: #ffd6d6;
11 }
12 @page :left { margin: 8px 32px 24px 8px; }
13 @page :right { margin: 16px 8px 8px 32px; }
14 @page :first { margin: 32px 8px 16px 24px; }
15
16 @font-face {
17 font-family: MatrixSans;
18 src: url('../../fonts/ParitySans.ttf') format('truetype');
19 font-style: normal;
20 font-weight: 400;
21 }
22 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
23 * { box-sizing: border-box; margin: 0; }
24 html, body { background: #ffffff; }
25 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
26 .stage {
27 display: inline-flex;
28 width: 156px;
29 min-height: 164px;
30 margin-right: 8px;
31 align-items: center;
32 justify-content: center;
33 background: #f7fafc;
34 border: 1px solid #cbd5e1;
35 font-size: 16px;
36 vertical-align: top;
37 }
38 .stage:last-child { margin-right: 0; }
39 .node {
40 width: 126px;
41 padding: 7px;
42 border: 2px solid #577590;
43 background-color: #e7f5ff;
44 color: #17324d;
45 }
46 .node.inner {
47 width: 58px;
48 height: 48px;
49 padding: 5px;
50 }
51 .node.outer { min-height: 96px; }
52 .own { height: 22px; white-space: nowrap; }
53 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
54 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
55 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
56 .f-images-replaced > .own > .asset { display: inline-block; }
57 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
58 .f-lists-counters > .own > .token { counter-increment: pair-item; }
59 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
60 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
61 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
62 @supports (display:grid) {
63 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
64 }
65 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
66
67 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
68 .stage { display: block; margin: 0; break-before: page; }
69 .stage > .node { min-height: 68px; margin: 47px auto 0; }
70 .stage > .node.outer { margin-top: 33px; }
71
72 /* The three compositions occupy first/right, left, and later-right pages.
73 Their asymmetric page areas expose side selection, cascade, content
74 origin, bottom capacity, and paint that crosses a page-area edge.
75 Horizontal body padding is a distinct root-flow gutter: each stage
76 deliberately shifts through it to the physical page-area start edge. */
77 body { padding-left: 8px; padding-right: 8px; }
78 .stage {
79 width: 152px;
80 height: 128px;
81 min-height: 128px;
82 margin-left: -8px;
83 border: 0;
84 background: #d8f3dc;
85 }
86 .node { width: 100%; }
87 .stage > .node,
88 .stage > .node.outer { margin: 0; }
89 .f-page-margins {}
90 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
91 </style>
92 </head>
93 <body>
94 <div class="stage"><div class="node f-page-margins f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
95 <div class="stage"><div class="node outer f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
96 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-page-margins"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
97 </body>
98 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.05% · raw 0.12% (1219 px) interactions-cartesian-color-opacity-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.001784% extra 0.001486% ΔE 1.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for color-opacity and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (95 total; showing 64 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 92 1208 25,62 → 395,93 288 total 0.2% · largest 0.04% · max ΔE 1.9 Extra 1 5 395,62 → 395,64 5 total 0.000646% · largest 0.000646% Missing 2 6 66,63 → 353,77 3 total 0.000775% · largest 0.000388%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 25,75 → 67,78 0.04 ΔE 1.4 ΔRGB(-2,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,90 → 382,93 0.02 ΔE 0.8 ΔRGB(-2,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 196,91 → 218,93 0.02 ΔE 1.1 ΔRGB(-3,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 371,75 → 371,86 0.004650 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,84 → 367,85 0.002196 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 372,75 → 375,75 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,82 → 366,82 0.001421 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,75 → 365,76 0.001292 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,75 → 379,76 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 374,85 → 377,85 0.001292 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 374,82 → 376,82 0.001163 ΔE 0.8 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 359,90 → 359,92 0.001163 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 374,77 → 376,77 0.001033 ΔE 0.4 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,81 → 361,82 0.000904 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,90 → 206,92 0.000904 ΔRGB(0,-29,-25) antialiasing coverage residue on a shared outline AntialiasCoverage 364,78 → 365,79 0.000775 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,80 → 380,81 0.000775 ΔE 0.8 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,82 → 378,83 0.000775 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,86 → 380,87 0.000775 ΔE 0.8 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline Extra 395,62 → 395,64 0.000646 candidate adds paint absent from reference (0.000646%) AntialiasCoverage 374,80 → 375,80 0.000646 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 365,80 → 366,81 0.000646 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,76 → 363,77 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 366,77 → 366,77 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,78 → 362,78 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,78 → 380,79 0.000517 ΔE 0.7 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,84 → 369,84 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline Missing 353,63 → 353,64 0.000388 candidate lacks paint present in reference (0.000388%) Missing 66,76 → 66,77 0.000388 candidate lacks paint present in reference (0.000388%) AntialiasCoverage 365,76 → 365,76 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,77 → 380,78 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 367,78 → 367,78 0.000388 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,79 → 362,79 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,79 → 377,79 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,80 → 364,80 0.000388 ΔE 0.4 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,80 → 378,80 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,84 → 378,84 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 369,84 → 369,85 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 359,85 → 359,86 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,85 → 362,86 0.000388 ΔE 0.8 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,87 → 360,87 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 376,75 → 376,75 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,77 → 378,78 0.000258 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,79 → 363,79 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 367,79 → 367,79 0.000258 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,80 → 361,80 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,80 → 367,80 0.000258 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,80 → 378,80 0.000258 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,81 → 368,81 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,82 → 366,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,82 → 368,82 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,83 → 360,84 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 380,84 0.000258 ΔE 0.8 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 360,84 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,85 → 377,85 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,85 → 367,85 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,86 → 370,86 0.000258 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,86 → 368,86 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,87 → 361,87 0.000258 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 370,87 → 370,87 0.000258 ΔE 0.4 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,87 → 379,87 0.000258 ΔE 0.8 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 45,75 → 45,75 0.000129 ΔRGB(0,4,4) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-color-opacity {color:#5a189a;opacity:.76;}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-color-opacity f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.09% · raw 0.12% (1205 px) interactions-cartesian-text-advanced-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.008104% extra 0.001501% ΔE 1.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for text-advanced and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (18 total; showing 18 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 7 1173 25,61 → 395,93 293 total 0.2% · largest 0.04% · max ΔE 1.9 Missing 10 27 66,62 → 382,93 4 total 0.003488% · largest 0.000517% Extra 1 5 395,62 → 395,64 5 total 0.000646% · largest 0.000646%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 189,61 → 231,64 0.04 ΔE 1.6 ΔRGB(-4,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 25,76 → 67,78 0.04 ΔE 1.6 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 196,91 → 218,93 0.02 ΔE 1.6 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,91 → 382,93 0.02 ΔE 1.6 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline Extra 395,62 → 395,64 0.000646 candidate adds paint absent from reference (0.000646%) Missing 381,91 → 382,91 0.000517 candidate lacks paint present in reference (0.000517%) Missing 196,92 → 196,93 0.000517 candidate lacks paint present in reference (0.000517%) Missing 360,92 → 360,93 0.000517 candidate lacks paint present in reference (0.000517%) AntialiasCoverage 360,92 → 360,93 0.000517 ΔE 0.4 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline Missing 230,62 → 230,63 0.000388 candidate lacks paint present in reference (0.000388%) Missing 353,63 → 353,64 0.000388 candidate lacks paint present in reference (0.000388%) Missing 66,76 → 67,76 0.000388 candidate lacks paint present in reference (0.000388%) Missing 217,91 → 218,91 0.000388 candidate lacks paint present in reference (0.000388%) Missing 231,62 → 231,62 0.000129 candidate lacks paint present in reference (0.000129%) Missing 231,64 → 231,64 0.000129 candidate lacks paint present in reference (0.000129%) Missing 371,93 → 371,93 0.000129 candidate lacks paint present in reference (0.000129%)
source · cases/interactions/interactions-cartesian-text-advanced-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>text-advanced x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
61 </style>
62 </head>
63 <body>
64 <div class="stage"><div class="node f-text-advanced f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
65 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
66 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 </body>
68 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.11% · raw 0.11% (1152 px) interactions-cartesian-inline-text-x-typography · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 24.4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for inline-text and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (19 total; showing 19 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 19 1152 23,48 → 368,85 165 total 0.1% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 23,60 → 33,70 0.02 ΔRGB(18,17,15) antialiasing coverage residue on a shared outline AntialiasCoverage 358,75 → 368,85 0.02 ΔRGB(18,17,15) antialiasing coverage residue on a shared outline AntialiasCoverage 204,48 → 212,60 0.02 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 217,51 → 223,60 0.01 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 217,52 → 222,59 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 206,54 → 211,59 0.009946 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 206,49 → 211,53 0.009171 ΔRGB(4,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 34,68 → 39,71 0.008396 ΔRGB(-19,-18,-16) antialiasing coverage residue on a shared outline AntialiasCoverage 27,62 → 29,66 0.006330 ΔRGB(-19,-18,-16) antialiasing coverage residue on a shared outline AntialiasCoverage 362,77 → 364,81 0.006330 ΔRGB(-19,-18,-16) antialiasing coverage residue on a shared outline AntialiasCoverage 34,62 → 40,65 0.005555 ΔRGB(89,84,76) antialiasing coverage residue on a shared outline AntialiasCoverage 35,70 → 40,73 0.004909 ΔRGB(-89,-83,-76) antialiasing coverage residue on a shared outline AntialiasCoverage 36,64 → 39,66 0.003617 ΔRGB(-74,-69,-63) antialiasing coverage residue on a shared outline AntialiasCoverage 36,67 → 39,69 0.003359 ΔRGB(72,68,62) antialiasing coverage residue on a shared outline AntialiasCoverage 215,48 → 217,48 0.001550 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 215,60 → 217,60 0.000775 ΔRGB(208,195,178) antialiasing coverage residue on a shared outline AntialiasCoverage 34,65 → 34,66 0.000517 ΔRGB(22,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 35,66 → 35,67 0.000517 ΔRGB(17,16,15) antialiasing coverage residue on a shared outline AntialiasCoverage 34,67 → 34,67 0.000388 ΔRGB(-18,-17,-15) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-inline-text-x-typography.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>inline-text x typography interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-inline-text {line-height:1.35;word-spacing:5px;}
61 .f-typography {font-size:18px;font-weight:700;letter-spacing:.7px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-inline-text f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-inline-text"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-typography"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-inline-text"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.11% · raw 0.11% (1099 px) interactions-cartesian-effects-x-effects · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 8.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and effects: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (4 total; showing 4 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 4 1099 181,36 → 467,67 381 total 0.1% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 345,36 → 467,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 354,67 → 408,67 0.02 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 190,67 → 244,67 0.02 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-effects.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x effects interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 </style>
62 </head>
63 <body>
64 <div class="stage"><div class="node f-effects f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
65 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 </body>
68 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.002265% · raw 0.11% (1095 px) interactions-cartesian-backgrounds-borders-x-color-opacity · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy ColorValue ΔE 0.5
Chrome ref ironpress full-page >1.0%/channel diff why: fill recolour ΔRGB(+2,+1,+0) (ΔE 0.5)
Cartesian family interaction for backgrounds-borders and color-opacity: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (7 total; showing 7 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 7 1095 17,57 → 362,110 614 total 0.1% · largest 0.08% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 208,76 → 216,87 0.08 ΔE 0.5 ΔRGB(2,1,0) fill recolour ΔRGB(+2,+1,+0) (ΔE 0.5) ColorValue 196,76 → 206,87 0.06 ΔE 0.5 ΔRGB(2,1,0) fill recolour ΔRGB(+2,+1,+0) (ΔE 0.5) AntialiasCoverage 17,57 → 17,57 0.000129 ΔRGB(7,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 362,68 → 362,68 0.000129 ΔRGB(5,5,3) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-7,-7,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 362,110 → 362,110 0.000129 ΔRGB(12,10,9) antialiasing coverage residue on a shared outline AntialiasCoverage 361,110 → 361,110 0.000129 ΔRGB(-7,-6,-6) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-color-opacity.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x color-opacity interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-color-opacity {color:#5a189a;opacity:.76;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.08% · raw 0.11% (1094 px) interactions-cartesian-text-advanced-x-typography · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage missing 0.02% extra 0.02% ΔE 1.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for text-advanced and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (23 total; showing 23 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 6 981 25,61 → 386,95 293 total 0.1% · largest 0.04% · max ΔE 2.2 Missing 12 54 45,62 → 385,95 21 total 0.006975% · largest 0.002713% Extra 5 59 37,77 → 386,95 17 total 0.007621% · largest 0.002196%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 189,61 → 231,64 0.04 ΔE 1.6 ΔRGB(-4,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 48,77 → 76,80 0.03 ΔE 2.1 ΔRGB(-6,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 196,92 → 222,95 0.02 ΔE 2.2 ΔRGB(-8,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,92 → 386,95 0.02 ΔE 1.6 ΔRGB(-6,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 25,77 → 38,80 0.01 ΔE 0.7 ΔRGB(-2,-1,0) antialiasing coverage residue on a shared outline Missing 45,79 → 47,80 0.002713 candidate lacks paint present in reference (0.002713%) ColorValue 45,77 → 47,79 0.002454 ΔRGB(8,-174,-144) fill recolour ΔRGB(+8,-174,-144) (ΔE 0) Extra 385,93 → 386,95 0.002196 candidate adds paint absent from reference (0.002196%) Extra 45,77 → 46,78 0.001421 candidate adds paint absent from reference (0.001421%) Extra 221,93 → 222,95 0.001421 candidate adds paint absent from reference (0.001421%) Extra 37,78 → 38,80 0.001292 candidate adds paint absent from reference (0.001292%) Extra 75,78 → 75,80 0.001292 candidate adds paint absent from reference (0.001292%) Missing 74,78 → 74,79 0.000904 candidate lacks paint present in reference (0.000904%) Missing 220,93 → 221,94 0.000775 candidate lacks paint present in reference (0.000775%) Missing 384,93 → 385,94 0.000775 candidate lacks paint present in reference (0.000775%) Missing 230,62 → 230,63 0.000388 candidate lacks paint present in reference (0.000388%) Missing 196,94 → 196,95 0.000388 candidate lacks paint present in reference (0.000388%) Missing 360,94 → 360,95 0.000388 candidate lacks paint present in reference (0.000388%) Missing 231,62 → 231,62 0.000129 candidate lacks paint present in reference (0.000129%) Missing 231,64 → 231,64 0.000129 candidate lacks paint present in reference (0.000129%) Missing 50,80 → 50,80 0.000129 candidate lacks paint present in reference (0.000129%) Missing 209,95 → 209,95 0.000129 candidate lacks paint present in reference (0.000129%) Missing 373,95 → 373,95 0.000129 candidate lacks paint present in reference (0.000129%)
source · cases/interactions/interactions-cartesian-text-advanced-x-typography.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>text-advanced x typography interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
61 .f-typography {font-size:18px;font-weight:700;letter-spacing:.7px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-text-advanced f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-typography"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.09% · raw 0.10% (1052 px) interactions-cartesian-images-replaced-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.006578% extra 0.001495% ΔE 1.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for images-replaced and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (18 total; showing 18 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 10 1025 25,43 → 395,102 284 total 0.1% · largest 0.04% · max ΔE 1.9 Extra 1 5 395,62 → 395,64 5 total 0.000646% · largest 0.000646% Missing 7 22 196,63 → 382,102 5 total 0.002842% · largest 0.000646%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 25,85 → 67,87 0.04 ΔE 1.3 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,100 → 382,102 0.02 ΔE 1.8 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 196,91 → 218,93 0.02 ΔE 1.6 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 244,43 → 244,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 80,57 → 80,81 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 207,92 → 207,92 0.000775 ΔE 1.7 ΔRGB(5,3,0) antialiasing coverage residue on a shared outline Missing 196,92 → 196,93 0.000646 candidate lacks paint present in reference (0.000646%) Missing 381,100 → 382,100 0.000646 candidate lacks paint present in reference (0.000646%) Extra 395,62 → 395,64 0.000646 candidate adds paint absent from reference (0.000646%) Missing 353,63 → 353,64 0.000388 candidate lacks paint present in reference (0.000388%) Missing 217,91 → 218,91 0.000388 candidate lacks paint present in reference (0.000388%) Missing 360,101 → 360,102 0.000388 candidate lacks paint present in reference (0.000388%) AntialiasCoverage 196,92 → 196,92 0.000388 ΔE 1.3 ΔRGB(4,2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 381,100 → 381,100 0.000388 ΔE 1.9 ΔRGB(6,3,0) antialiasing coverage residue on a shared outline Missing 207,93 → 207,93 0.000258 candidate lacks paint present in reference (0.000258%) Missing 371,102 → 371,102 0.000129 candidate lacks paint present in reference (0.000129%)
source · cases/interactions/interactions-cartesian-images-replaced-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>images-replaced x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-images-replaced {}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-images-replaced f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.10% · raw 0.10% (380 px) interactions-cartesian-images-replaced-x-paged-media · same-element-and-bidirectional-nesting · 4 pages PASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 44.1
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for images-replaced and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3 total; showing 3 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 3 380 66,57 → 100,81 152 total 0.2% · largest 0.06%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 80,57 → 80,81 0.06 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 100,57 → 100,81 0.06 ΔRGB(-7,-14,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 66,57 → 66,81 0.03 ΔRGB(175,188,196) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-images-replaced-x-paged-media.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>images-replaced x paged-media interaction</title>
6 <style>
7 @page { size: 192px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 min-height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 padding: 7px;
35 border: 2px solid #577590;
36 background-color: #e7f5ff;
37 color: #17324d;
38 }
39 .node.inner {
40 width: 58px;
41 height: 48px;
42 padding: 5px;
43 }
44 .node.outer { min-height: 96px; }
45 .own { height: 22px; white-space: nowrap; }
46 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
47 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
48 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
49 .f-images-replaced > .own > .asset { display: inline-block; }
50 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
51 .f-lists-counters > .own > .token { counter-increment: pair-item; }
52 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
53 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
54 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
55 @supports (display:grid) {
56 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
57 }
58 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
59
60 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
61 .stage { display: block; margin: 0; break-before: page; }
62 .stage > .node { min-height: 68px; margin: 47px auto 0; }
63 .stage > .node.outer { margin-top: 33px; }
64 .f-images-replaced {}
65 .f-paged-media {break-before:page;break-inside:avoid;}
66 </style>
67 </head>
68 <body>
69 <div class="stage"><div class="node f-images-replaced f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
70 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-paged-media"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
71 <div class="stage"><div class="node outer f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
72 </body>
73 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.07% · raw 0.10% (992 px) interactions-cartesian-generated-content-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.01% extra 0.001490% ΔE 1.8
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for generated-content and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (23 total; showing 23 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 11 949 25,62 → 395,134 268 total 0.1% · largest 0.03% · max ΔE 3.5 Extra 1 5 395,62 → 395,64 5 total 0.000646% · largest 0.000646% Missing 11 38 30,63 → 382,112 6 total 0.004909% · largest 0.000775%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 196,110 → 218,112 0.02 ΔE 1.9 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,110 → 382,112 0.02 ΔE 0.8 ΔRGB(-5,-3,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 25,95 → 67,97 0.02 ΔE 3.5 ΔRGB(-13,-5,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,132 → 366,134 0.007621 ΔE 0.7 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,91 → 366,93 0.006975 ΔE 1.6 ΔRGB(-2,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 25,76 → 31,78 0.006588 ΔE 1.6 ΔRGB(-2,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 25,118 → 31,119 0.005425 ΔE 0.7 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline Missing 371,111 → 371,112 0.000775 candidate lacks paint present in reference (0.000775%) AntialiasCoverage 30,117 → 31,117 0.000775 ΔE 0.8 ΔRGB(3,2,1) antialiasing coverage residue on a shared outline Extra 395,62 → 395,64 0.000646 candidate adds paint absent from reference (0.000646%) Missing 360,92 → 360,93 0.000517 candidate lacks paint present in reference (0.000517%) Missing 381,110 → 382,110 0.000517 candidate lacks paint present in reference (0.000517%) Missing 353,63 → 353,64 0.000388 candidate lacks paint present in reference (0.000388%) Missing 30,76 → 31,76 0.000388 candidate lacks paint present in reference (0.000388%) Missing 365,91 → 366,91 0.000388 candidate lacks paint present in reference (0.000388%) Missing 66,95 → 67,95 0.000388 candidate lacks paint present in reference (0.000388%) Missing 217,110 → 218,110 0.000388 candidate lacks paint present in reference (0.000388%) Missing 196,111 → 196,112 0.000388 candidate lacks paint present in reference (0.000388%) Missing 360,111 → 360,112 0.000388 candidate lacks paint present in reference (0.000388%) Missing 382,111 → 382,112 0.000388 candidate lacks paint present in reference (0.000388%) AntialiasCoverage 66,95 → 67,95 0.000388 ΔE 0.5 ΔRGB(-2,-1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-generated-content-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>generated-content x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-generated-content {}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-generated-content f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-generated-content"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.09% · raw 0.09% (964 px) interactions-cartesian-clip-mask-x-effects · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage extra 0.001859% ΔE 6.9
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and effects: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (50 total; showing 50 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 49 958 22,36 → 467,122 381 total 0.1% · largest 0.05% · max ΔE 7.2 Extra 1 6 141,53 → 141,55 6 total 0.000775% · largest 0.000775%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 345,36 → 467,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 190,67 → 244,67 0.02 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 136,53 → 140,53 0.001808 ΔE 7.2 ΔRGB(0,-9,-8) antialiasing coverage residue on a shared outline ColorValue 24,108 → 28,108 0.001550 ΔE 7.1 ΔRGB(-1,-12,-10) fill recolour ΔRGB(-1,-12,-10) (ΔE 7.1) AntialiasCoverage 29,109 → 32,109 0.001550 ΔE 7.1 ΔRGB(-1,-14,-11) antialiasing coverage residue on a shared outline ColorValue 33,109 → 37,109 0.001550 ΔE 7.1 ΔRGB(-1,-12,-10) fill recolour ΔRGB(-1,-12,-10) (ΔE 7.1) AntialiasCoverage 38,109 → 42,109 0.001550 ΔE 7.1 ΔRGB(-1,-14,-11) antialiasing coverage residue on a shared outline ColorValue 43,110 → 46,110 0.001550 ΔE 7.1 ΔRGB(-1,-12,-10) fill recolour ΔRGB(-1,-12,-10) (ΔE 7.1) ColorValue 47,110 → 51,110 0.001550 ΔE 7.1 ΔRGB(-1,-14,-11) fill recolour ΔRGB(-1,-14,-11) (ΔE 7.1) ColorValue 52,110 → 55,110 0.001550 ΔE 7.1 ΔRGB(-1,-12,-10) fill recolour ΔRGB(-1,-12,-10) (ΔE 7.1) ColorValue 57,111 → 60,111 0.001550 ΔE 7.1 ΔRGB(-1,-14,-11) fill recolour ΔRGB(-1,-14,-11) (ΔE 7.1) ColorValue 66,111 → 69,111 0.001550 ΔE 7.1 ΔRGB(-1,-14,-11) fill recolour ΔRGB(-1,-14,-11) (ΔE 7.1) ColorValue 75,112 → 79,112 0.001550 ΔRGB(0,-6,-6) fill recolour ΔRGB(+0,-6,-6) (ΔE 0) AntialiasCoverage 84,113 → 88,113 0.001550 ΔRGB(0,-6,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 94,113 → 97,113 0.001550 ΔRGB(0,-6,-6) antialiasing coverage residue on a shared outline ColorValue 103,114 → 107,114 0.001550 ΔRGB(2,-9,-23) fill recolour ΔRGB(+2,-9,-23) (ΔE 0) AntialiasCoverage 112,115 → 116,115 0.001550 ΔRGB(0,-6,-5) antialiasing coverage residue on a shared outline ColorValue 61,111 → 65,111 0.001421 ΔE 7.1 ΔRGB(-1,-14,-11) fill recolour ΔRGB(-1,-14,-11) (ΔE 7.1) ColorValue 71,112 → 74,112 0.001421 ΔE 7.1 ΔRGB(-1,-14,-11) fill recolour ΔRGB(-1,-14,-11) (ΔE 7.1) ColorValue 80,112 → 83,112 0.001421 ΔRGB(0,-6,-6) fill recolour ΔRGB(+0,-6,-6) (ΔE 0) AntialiasCoverage 89,113 → 92,113 0.001421 ΔRGB(0,-6,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 99,114 → 102,114 0.001421 ΔRGB(0,-6,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 108,114 → 111,114 0.001421 ΔRGB(0,-6,-5) antialiasing coverage residue on a shared outline AntialiasCoverage 117,115 → 120,115 0.001421 ΔRGB(0,-6,-5) antialiasing coverage residue on a shared outline AntialiasCoverage 140,64 → 140,66 0.000904 ΔRGB(-1,-6,-5) antialiasing coverage residue on a shared outline AntialiasCoverage 139,66 → 139,68 0.000904 ΔRGB(0,-6,-5) antialiasing coverage residue on a shared outline ColorValue 139,69 → 139,71 0.000904 ΔRGB(0,-6,-5) fill recolour ΔRGB(+0,-6,-5) (ΔE 0) AntialiasCoverage 139,72 → 139,74 0.000904 ΔRGB(0,-6,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 138,74 → 138,76 0.000904 ΔRGB(0,-6,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 138,77 → 138,79 0.000904 ΔRGB(0,-6,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 138,79 → 138,81 0.000904 ΔRGB(0,-6,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 137,82 → 137,84 0.000904 ΔRGB(0,-6,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 137,85 → 137,87 0.000904 ΔRGB(0,-6,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 137,87 → 137,89 0.000904 ΔE 6.8 ΔRGB(-1,-13,-10) antialiasing coverage residue on a shared outline ColorValue 136,90 → 136,92 0.000904 ΔE 7.1 ΔRGB(-1,-14,-11) fill recolour ΔRGB(-1,-14,-11) (ΔE 7.1) ColorValue 136,93 → 136,95 0.000904 ΔE 5.9 ΔRGB(-1,-12,-10) fill recolour ΔRGB(-1,-12,-10) (ΔE 5.9) ColorValue 136,95 → 136,97 0.000904 ΔE 6.8 ΔRGB(-1,-13,-10) fill recolour ΔRGB(-1,-13,-10) (ΔE 6.8) AntialiasCoverage 135,98 → 135,100 0.000904 ΔE 7.1 ΔRGB(0,-14,-11) antialiasing coverage residue on a shared outline ColorValue 135,101 → 135,103 0.000904 ΔE 7.1 ΔRGB(-1,-14,-11) fill recolour ΔRGB(-1,-14,-11) (ΔE 7.1) ColorValue 135,103 → 135,105 0.000904 ΔE 5.9 ΔRGB(-1,-12,-10) fill recolour ΔRGB(-1,-12,-10) (ΔE 5.9) ColorValue 134,106 → 134,108 0.000904 ΔE 6.8 ΔRGB(-1,-13,-10) fill recolour ΔRGB(-1,-13,-10) (ΔE 6.8) ColorValue 134,108 → 134,110 0.000904 ΔE 7.1 ΔRGB(-1,-14,-11) fill recolour ΔRGB(-1,-14,-11) (ΔE 7.1) AntialiasCoverage 134,111 → 134,113 0.000904 ΔRGB(-1,-8,-8) antialiasing coverage residue on a shared outline Extra 141,53 → 141,55 0.000775 candidate adds paint absent from reference (0.000775%) AntialiasCoverage 140,61 → 140,63 0.000775 ΔRGB(0,-6,-5) antialiasing coverage residue on a shared outline ColorValue 22,108 → 23,108 0.000517 ΔE 7.2 ΔRGB(-1,-14,-11) fill recolour ΔRGB(-1,-14,-11) (ΔE 7.2) AntialiasCoverage 133,114 → 133,115 0.000517 ΔRGB(0,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 141,55 → 141,55 0.000129 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 192,120 → 192,120 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 218,122 → 218,122 0.000129 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-effects.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x effects interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.09% · raw 0.09% (944 px) interactions-cartesian-multicol-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 35.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for multicol and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (9 total; showing 9 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 9 944 255,52 → 413,86 332 total 0.1% · largest 0.04%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 255,52 → 267,64 0.04 ΔRGB(-5,-4,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 268,53 → 277,65 0.04 ΔRGB(9,9,8) antialiasing coverage residue on a shared outline AntialiasCoverage 259,54 → 264,60 0.02 ΔRGB(11,10,9) antialiasing coverage residue on a shared outline AntialiasCoverage 269,59 → 275,63 0.01 ΔRGB(-9,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 270,54 → 275,58 0.01 ΔRGB(-5,-5,-5) antialiasing coverage residue on a shared outline AntialiasCoverage 308,56 → 308,56 0.000129 ΔRGB(-8,-7,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 386,82 → 386,82 0.000129 ΔRGB(7,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 413,86 → 413,86 0.000129 ΔRGB(13,11,9) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-multicol-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>multicol x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-multicol f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.07% · raw 0.09% (940 px) interactions-cartesian-tables-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.008071% extra 0.001495% ΔE 1.4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for tables and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (17 total; showing 17 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 7 908 31,62 → 395,99 268 total 0.1% · largest 0.03% · max ΔE 1.9 Extra 1 5 395,62 → 395,64 5 total 0.000646% · largest 0.000646% Missing 9 27 51,63 → 391,99 3 total 0.003488% · largest 0.000388%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 199,94 → 221,96 0.02 ΔE 1.1 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 31,82 → 52,84 0.02 ΔE 1.1 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 55,82 → 76,84 0.02 ΔE 1.6 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,97 → 377,99 0.01 ΔE 0.8 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 380,97 → 391,99 0.01 ΔE 1.1 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline Extra 395,62 → 395,64 0.000646 candidate adds paint absent from reference (0.000646%) Missing 353,63 → 353,64 0.000388 candidate lacks paint present in reference (0.000388%) Missing 51,82 → 52,82 0.000388 candidate lacks paint present in reference (0.000388%) Missing 75,82 → 76,82 0.000388 candidate lacks paint present in reference (0.000388%) Missing 220,94 → 220,94 0.000388 candidate lacks paint present in reference (0.000388%) Missing 199,95 → 199,96 0.000388 candidate lacks paint present in reference (0.000388%) Missing 376,97 → 377,97 0.000388 candidate lacks paint present in reference (0.000388%) Missing 390,97 → 391,97 0.000388 candidate lacks paint present in reference (0.000388%) Missing 366,98 → 366,99 0.000388 candidate lacks paint present in reference (0.000388%) Missing 380,98 → 380,99 0.000388 candidate lacks paint present in reference (0.000388%)
source · cases/interactions/interactions-cartesian-tables-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>tables x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-tables {display:table;border-collapse:separate;border-spacing:3px;}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-tables f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-tables"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.09% (343 px) interactions-cartesian-color-opacity-x-paged-media · same-element-and-bidirectional-nesting · 4 pages PASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.4
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff why: page 4: antialiasing coverage residue on a shared outline
Cartesian family interaction for color-opacity and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (71 total; showing 64 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 71 343 31,75 → 52,86 38 total 0.1% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 45,81 → 49,85 0.02 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 43,75 → 43,86 0.01 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 45,76 → 48,80 0.01 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 33,84 → 39,84 0.009224 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 34,82 → 38,82 0.005214 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 44,75 → 47,75 0.004813 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 35,75 → 37,76 0.004011 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 49,75 → 51,76 0.004011 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 36,76 → 36,78 0.003208 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 51,77 → 51,78 0.002807 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 32,81 → 33,82 0.002807 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 49,86 → 50,86 0.002807 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 38,77 → 38,79 0.002406 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 41,84 → 41,86 0.002406 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 37,80 → 38,81 0.002005 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 40,82 → 40,83 0.002005 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 34,76 → 35,77 0.001604 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 34,78 → 34,78 0.001604 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 37,78 → 37,79 0.001604 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 39,80 → 39,80 0.001604 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 39,81 → 39,82 0.001604 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 52,84 → 52,84 0.001604 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 32,86 → 33,86 0.001604 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 34,79 → 34,79 0.001203 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 51,79 → 51,79 0.001203 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 49,79 → 49,79 0.001203 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 51,81 → 51,81 0.001203 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 52,82 → 52,83 0.001203 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 50,83 → 50,83 0.001203 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 40,84 → 40,84 0.001203 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 50,84 → 50,84 0.001203 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 51,85 → 51,85 0.001203 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 31,85 → 31,86 0.001203 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 48,75 → 48,75 0.000802 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 37,76 → 37,76 0.000802 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 37,76 → 37,76 0.000802 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 49,76 → 49,76 0.000802 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 38,77 → 38,77 0.000802 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 50,77 → 50,78 0.000802 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 35,78 → 35,79 0.000802 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 33,80 → 33,80 0.000802 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 35,80 → 35,80 0.000802 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 50,80 → 50,80 0.000802 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 35,80 → 35,81 0.000802 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 49,80 → 50,80 0.000802 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 34,81 → 34,82 0.000802 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 49,81 → 49,81 0.000802 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 38,82 → 38,82 0.000802 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 50,82 → 50,82 0.000802 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 32,83 → 32,84 0.000802 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 32,84 → 32,84 0.000802 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 33,85 → 33,85 0.000802 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 49,85 → 49,85 0.000802 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 39,85 → 39,85 0.000802 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 51,85 → 51,86 0.000802 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 40,86 → 40,86 0.000802 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 41,86 → 41,86 0.000802 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 49,77 → 49,77 0.000401 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 36,78 → 36,78 0.000401 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 50,78 → 50,78 0.000401 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 49,79 → 49,79 0.000401 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 35,79 → 35,79 0.000401 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 37,80 → 37,80 0.000401 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 48,80 → 48,80 0.000401 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-paged-media.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x paged-media interaction</title>
6 <style>
7 @page { size: 192px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 min-height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 padding: 7px;
35 border: 2px solid #577590;
36 background-color: #e7f5ff;
37 color: #17324d;
38 }
39 .node.inner {
40 width: 58px;
41 height: 48px;
42 padding: 5px;
43 }
44 .node.outer { min-height: 96px; }
45 .own { height: 22px; white-space: nowrap; }
46 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
47 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
48 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
49 .f-images-replaced > .own > .asset { display: inline-block; }
50 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
51 .f-lists-counters > .own > .token { counter-increment: pair-item; }
52 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
53 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
54 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
55 @supports (display:grid) {
56 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
57 }
58 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
59
60 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
61 .stage { display: block; margin: 0; break-before: page; }
62 .stage > .node { min-height: 68px; margin: 47px auto 0; }
63 .stage > .node.outer { margin-top: 33px; }
64 .f-color-opacity {color:#5a189a;opacity:.76;}
65 .f-paged-media {break-before:page;break-inside:avoid;}
66 </style>
67 </head>
68 <body>
69 <div class="stage"><div class="node f-color-opacity f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
70 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-paged-media"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
71 <div class="stage"><div class="node outer f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
72 </body>
73 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.08% · raw 0.09% (926 px) interactions-cartesian-text-advanced-x-units-values · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.009870% ΔE 1.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for text-advanced and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (21 total; showing 21 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 10 890 16,61 → 373,93 293 total 0.1% · largest 0.04% · max ΔE 2.2 Missing 11 36 37,62 → 373,93 10 total 0.004650% · largest 0.001292%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 189,61 → 231,64 0.04 ΔE 1.6 ΔRGB(-4,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 16,77 → 58,78 0.04 ΔE 1.6 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 196,91 → 218,93 0.02 ΔE 1.6 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 351,91 → 373,93 0.02 ΔE 1.6 ΔRGB(-4,-2,0) antialiasing coverage residue on a shared outline Missing 57,76 → 58,78 0.001292 candidate lacks paint present in reference (0.001292%) AntialiasCoverage 59,76 → 59,78 0.000775 ΔE 0.4 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 207,92 → 207,92 0.000775 ΔE 1.7 ΔRGB(5,3,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,92 → 362,92 0.000775 ΔE 2.2 ΔRGB(7,3,0) antialiasing coverage residue on a shared outline Missing 196,92 → 196,93 0.000646 candidate lacks paint present in reference (0.000646%) Missing 351,92 → 351,93 0.000646 candidate lacks paint present in reference (0.000646%) Missing 230,62 → 230,63 0.000388 candidate lacks paint present in reference (0.000388%) Missing 217,91 → 218,91 0.000388 candidate lacks paint present in reference (0.000388%) Missing 372,91 → 373,91 0.000388 candidate lacks paint present in reference (0.000388%) AntialiasCoverage 57,76 → 58,76 0.000388 ΔE 1.6 ΔRGB(5,2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 196,92 → 196,92 0.000388 ΔE 1.3 ΔRGB(4,2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 351,92 → 351,92 0.000388 ΔE 1.9 ΔRGB(6,3,0) antialiasing coverage residue on a shared outline Missing 207,93 → 207,93 0.000258 candidate lacks paint present in reference (0.000258%) Missing 362,93 → 362,93 0.000258 candidate lacks paint present in reference (0.000258%) Missing 231,62 → 231,62 0.000129 candidate lacks paint present in reference (0.000129%) Missing 231,64 → 231,64 0.000129 candidate lacks paint present in reference (0.000129%) Missing 37,78 → 37,78 0.000129 candidate lacks paint present in reference (0.000129%)
source · cases/interactions/interactions-cartesian-text-advanced-x-units-values.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>text-advanced x units-values interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
61 .f-units-values {width:calc(100% - 9px);padding-left:5%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-text-advanced f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-units-values"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.07% · raw 0.09% (910 px) interactions-cartesian-flexbox-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.005682% extra 0.04% ΔE 1.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for flexbox and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (17 total; showing 17 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 6 753 58,62 → 395,99 268 total 0.10% · largest 0.03% · max ΔE 1.9 Extra 4 138 58,62 → 395,99 64 total 0.02% · largest 0.008267% Missing 7 19 99,63 → 393,99 3 total 0.002454% · largest 0.000388%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 58,90 → 100,92 0.02 ΔE 1.1 ΔRGB(-4,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 245,84 → 267,86 0.02 ΔE 1.6 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 371,97 → 393,99 0.02 ΔE 0.8 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline Extra 58,92 → 78,92 0.008267 candidate adds paint absent from reference (0.008267%) Extra 79,92 → 100,92 0.008267 candidate adds paint absent from reference (0.008267%) AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline Extra 395,62 → 395,64 0.000646 candidate adds paint absent from reference (0.000646%) Extra 393,97 → 393,99 0.000646 candidate adds paint absent from reference (0.000646%) Missing 353,63 → 353,64 0.000388 candidate lacks paint present in reference (0.000388%) Missing 266,84 → 267,84 0.000388 candidate lacks paint present in reference (0.000388%) Missing 245,85 → 245,86 0.000388 candidate lacks paint present in reference (0.000388%) Missing 99,90 → 100,90 0.000388 candidate lacks paint present in reference (0.000388%) Missing 392,97 → 393,97 0.000388 candidate lacks paint present in reference (0.000388%) Missing 371,98 → 371,99 0.000388 candidate lacks paint present in reference (0.000388%) Missing 256,86 → 256,86 0.000129 candidate lacks paint present in reference (0.000129%) AntialiasCoverage 393,97 → 393,97 0.000129 ΔE 1.8 ΔRGB(-7,-3,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-flexbox-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>flexbox x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-flexbox {display:flex;align-items:center;justify-content:space-around;gap:4px;}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-flexbox f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-flexbox"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.07% · raw 0.09% (909 px) interactions-cartesian-clip-mask-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.007503% extra 0.001631% ΔE 1.8
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (20 total; showing 20 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 9 881 25,62 → 395,122 280 total 0.1% · largest 0.04% · max ΔE 1.9 Extra 1 5 395,62 → 395,64 5 total 0.000646% · largest 0.000646% Missing 10 23 46,63 → 382,93 5 total 0.002971% · largest 0.000646%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 25,76 → 67,78 0.04 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 196,91 → 218,93 0.02 ΔE 1.6 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,91 → 382,93 0.02 ΔE 1.6 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,92 → 360,93 0.000904 ΔE 0.5 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline Missing 381,91 → 382,91 0.000646 candidate lacks paint present in reference (0.000646%) Extra 395,62 → 395,64 0.000646 candidate adds paint absent from reference (0.000646%) Missing 196,92 → 196,93 0.000517 candidate lacks paint present in reference (0.000517%) Missing 353,63 → 353,64 0.000388 candidate lacks paint present in reference (0.000388%) Missing 66,76 → 67,76 0.000388 candidate lacks paint present in reference (0.000388%) Missing 217,91 → 218,91 0.000388 candidate lacks paint present in reference (0.000388%) AntialiasCoverage 381,91 → 381,91 0.000388 ΔE 1.3 ΔRGB(4,2,0) antialiasing coverage residue on a shared outline Missing 46,78 → 46,78 0.000129 candidate lacks paint present in reference (0.000129%) Missing 207,93 → 207,93 0.000129 candidate lacks paint present in reference (0.000129%) Missing 360,93 → 360,93 0.000129 candidate lacks paint present in reference (0.000129%) Missing 371,93 → 371,93 0.000129 candidate lacks paint present in reference (0.000129%) Missing 382,93 → 382,93 0.000129 candidate lacks paint present in reference (0.000129%) AntialiasCoverage 192,120 → 192,120 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 218,122 → 218,122 0.000129 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.07% · raw 0.09% (903 px) interactions-cartesian-selectors-cascade-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.007764% extra 0.001493% ΔE 1.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for selectors-cascade and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (17 total; showing 17 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 7 872 25,62 → 395,93 281 total 0.1% · largest 0.04% · max ΔE 1.9 Extra 1 5 395,62 → 395,64 5 total 0.000646% · largest 0.000646% Missing 9 26 66,63 → 382,93 5 total 0.003359% · largest 0.000646%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 25,76 → 67,78 0.04 ΔE 1.6 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,91 → 382,93 0.02 ΔE 1.6 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 196,91 → 218,93 0.02 ΔE 1.6 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 207,92 → 207,92 0.000775 ΔE 1.7 ΔRGB(5,3,0) antialiasing coverage residue on a shared outline Missing 196,92 → 196,93 0.000646 candidate lacks paint present in reference (0.000646%) Extra 395,62 → 395,64 0.000646 candidate adds paint absent from reference (0.000646%) Missing 381,91 → 382,91 0.000517 candidate lacks paint present in reference (0.000517%) Missing 360,92 → 360,93 0.000517 candidate lacks paint present in reference (0.000517%) Missing 353,63 → 353,64 0.000388 candidate lacks paint present in reference (0.000388%) Missing 66,76 → 67,76 0.000388 candidate lacks paint present in reference (0.000388%) Missing 217,91 → 218,91 0.000388 candidate lacks paint present in reference (0.000388%) AntialiasCoverage 196,92 → 196,92 0.000388 ΔE 1.3 ΔRGB(4,2,0) antialiasing coverage residue on a shared outline Missing 207,93 → 207,93 0.000258 candidate lacks paint present in reference (0.000258%) Missing 371,93 → 371,93 0.000129 candidate lacks paint present in reference (0.000129%) Missing 382,93 → 382,93 0.000129 candidate lacks paint present in reference (0.000129%)
source · cases/interactions/interactions-cartesian-selectors-cascade-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>selectors-cascade x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-selectors-cascade {}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-selectors-cascade f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-selectors-cascade"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.07% · raw 0.09% (900 px) interactions-cartesian-grid-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.005982% extra 0.04% ΔE 1.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for grid and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (16 total; showing 16 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 6 746 25,62 → 395,99 268 total 0.10% · largest 0.03% · max ΔE 1.9 Extra 3 134 25,62 → 395,92 65 total 0.02% · largest 0.008396% Missing 7 20 66,63 → 382,99 4 total 0.002583% · largest 0.000517%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 246,84 → 268,86 0.02 ΔE 1.6 ΔRGB(-2,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,97 → 382,99 0.02 ΔE 1.3 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 25,91 → 67,92 0.02 ΔE 1.1 ΔRGB(-4,-2,0) antialiasing coverage residue on a shared outline Extra 46,92 → 67,92 0.008396 candidate adds paint absent from reference (0.008396%) Extra 25,92 → 45,92 0.008267 candidate adds paint absent from reference (0.008267%) AntialiasCoverage 66,90 → 67,92 0.001292 ΔE 1.1 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline Extra 395,62 → 395,64 0.000646 candidate adds paint absent from reference (0.000646%) Missing 381,97 → 382,97 0.000517 candidate lacks paint present in reference (0.000517%) Missing 353,63 → 353,64 0.000388 candidate lacks paint present in reference (0.000388%) Missing 267,84 → 268,84 0.000388 candidate lacks paint present in reference (0.000388%) Missing 246,85 → 246,86 0.000388 candidate lacks paint present in reference (0.000388%) Missing 66,90 → 67,90 0.000388 candidate lacks paint present in reference (0.000388%) Missing 360,98 → 360,99 0.000388 candidate lacks paint present in reference (0.000388%) Missing 257,86 → 257,86 0.000129 candidate lacks paint present in reference (0.000129%)
source · cases/interactions/interactions-cartesian-grid-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>grid x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-grid {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px;}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-grid f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-grid"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.07% · raw 0.09% (899 px) interactions-cartesian-multicol-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.01% extra 0.001495% ΔE 1.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for multicol and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (14 total; showing 14 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 5 859 25,62 → 395,93 281 total 0.1% · largest 0.04% · max ΔE 1.9 Extra 1 5 395,62 → 395,64 5 total 0.000646% · largest 0.000646% Missing 8 35 66,63 → 382,93 19 total 0.004521% · largest 0.002454%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 25,76 → 67,78 0.04 ΔE 1.6 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 253,69 → 276,71 0.02 ΔE 1.6 ΔRGB(-2,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,91 → 382,93 0.02 ΔE 1.6 ΔRGB(-6,-2,0) antialiasing coverage residue on a shared outline Missing 380,91 → 382,93 0.002454 candidate lacks paint present in reference (0.002454%) AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline Extra 395,62 → 395,64 0.000646 candidate adds paint absent from reference (0.000646%) Missing 360,92 → 360,93 0.000517 candidate lacks paint present in reference (0.000517%) Missing 353,63 → 353,64 0.000388 candidate lacks paint present in reference (0.000388%) Missing 253,70 → 253,71 0.000388 candidate lacks paint present in reference (0.000388%) Missing 66,76 → 67,76 0.000388 candidate lacks paint present in reference (0.000388%) Missing 275,69 → 275,69 0.000129 candidate lacks paint present in reference (0.000129%) Missing 264,71 → 264,71 0.000129 candidate lacks paint present in reference (0.000129%) Missing 371,93 → 371,93 0.000129 candidate lacks paint present in reference (0.000129%)
source · cases/interactions/interactions-cartesian-multicol-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>multicol x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-multicol f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.07% · raw 0.09% (897 px) interactions-cartesian-backgrounds-borders-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.008390% extra 0.001498% ΔE 1.9
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (24 total; showing 24 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 12 864 17,57 → 395,110 279 total 0.1% · largest 0.04% · max ΔE 1.9 Extra 1 5 395,62 → 395,64 5 total 0.000646% · largest 0.000646% Missing 11 28 26,63 → 383,94 6 total 0.003617% · largest 0.000775%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 26,77 → 68,79 0.04 ΔRGB(-8,-4,0) antialiasing coverage residue on a shared outline AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 197,92 → 219,94 0.02 ΔE 1.8 ΔRGB(-6,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,92 → 383,94 0.02 ΔRGB(-10,-4,0) antialiasing coverage residue on a shared outline AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline Missing 382,92 → 383,92 0.000775 candidate lacks paint present in reference (0.000775%) Extra 395,62 → 395,64 0.000646 candidate adds paint absent from reference (0.000646%) AntialiasCoverage 208,93 → 208,93 0.000517 ΔRGB(6,3,0) antialiasing coverage residue on a shared outline AntialiasCoverage 372,93 → 372,93 0.000517 ΔRGB(6,4,0) antialiasing coverage residue on a shared outline Missing 353,63 → 353,64 0.000388 candidate lacks paint present in reference (0.000388%) Missing 67,77 → 68,77 0.000388 candidate lacks paint present in reference (0.000388%) Missing 26,78 → 26,79 0.000388 candidate lacks paint present in reference (0.000388%) Missing 218,92 → 219,92 0.000388 candidate lacks paint present in reference (0.000388%) Missing 361,93 → 361,94 0.000388 candidate lacks paint present in reference (0.000388%) Missing 208,94 → 208,94 0.000258 candidate lacks paint present in reference (0.000258%) Missing 372,94 → 372,94 0.000258 candidate lacks paint present in reference (0.000258%) Missing 47,79 → 47,79 0.000129 candidate lacks paint present in reference (0.000129%) Missing 197,94 → 197,94 0.000129 candidate lacks paint present in reference (0.000129%) Missing 383,94 → 383,94 0.000129 candidate lacks paint present in reference (0.000129%) AntialiasCoverage 17,57 → 17,57 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,68 → 362,68 0.000129 ΔRGB(6,7,5) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,110 → 362,110 0.000129 ΔRGB(15,14,12) antialiasing coverage residue on a shared outline AntialiasCoverage 361,110 → 361,110 0.000129 ΔRGB(-9,-8,-8) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.05% · raw 0.09% (894 px) interactions-cartesian-color-opacity-x-effects · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 4.9
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for color-opacity and effects: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (73 total; showing 64 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 73 894 190,36 → 467,86 381 total 0.1% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 345,36 → 467,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 190,67 → 244,67 0.02 ΔRGB(5,-6,-27) antialiasing coverage residue on a shared outline AntialiasCoverage 373,81 → 377,85 0.004909 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,75 → 371,86 0.004650 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 373,76 → 376,80 0.003875 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,84 → 367,84 0.002971 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,82 → 366,82 0.001679 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 372,75 → 375,75 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,75 → 365,76 0.001292 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,75 → 379,76 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 364,78 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,77 → 379,78 0.000904 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,81 → 361,82 0.000904 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,86 → 378,86 0.000904 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,77 → 366,79 0.000775 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,84 → 369,86 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,80 → 366,81 0.000646 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,82 → 368,83 0.000646 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,76 → 363,77 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,78 → 362,78 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,78 → 365,79 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 367,80 → 367,80 0.000517 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,81 → 367,82 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 380,84 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,86 → 361,86 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,79 → 362,79 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,79 → 379,79 0.000388 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,79 → 377,79 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,81 → 379,81 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,82 → 380,83 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,83 → 378,83 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,84 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,84 → 378,84 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,85 → 379,85 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 359,85 → 359,86 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,75 → 376,75 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,76 → 365,76 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,76 → 365,76 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 377,76 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,77 → 366,77 0.000258 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,77 → 378,78 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,78 → 363,79 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 361,80 → 361,80 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,80 → 363,80 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,80 → 378,80 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,80 → 363,81 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,80 → 378,80 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,81 → 362,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,81 → 377,81 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 366,82 → 366,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,82 → 378,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,83 → 360,84 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 360,84 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,85 → 361,85 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,85 → 377,85 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,85 → 367,85 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,85 → 379,86 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,86 → 368,86 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,86 → 369,86 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,77 → 377,77 0.000129 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,78 → 364,78 0.000129 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,78 → 378,78 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,79 → 377,79 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,79 → 363,79 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-effects.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x effects interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-color-opacity {color:#5a189a;opacity:.76;}
61 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-color-opacity f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.05% · raw 0.09% (892 px) interactions-cartesian-text-advanced-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.05% extra 0.000297% ΔE 1.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for text-advanced and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (58 total; showing 58 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 27 739 28,61 → 413,94 201 total 0.10% · largest 0.03% · max ΔE 1.6 Missing 30 152 29,62 → 384,93 10 total 0.02% · largest 0.001292% Extra 1 1 28,75 → 28,75 1 total 0.000129% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 202,61 → 231,64 0.03 ΔE 1.1 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 49,76 → 71,79 0.02 ΔE 1.1 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 28,75 → 41,77 0.01 ΔE 1.1 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,90 → 376,92 0.007750 ΔE 1.1 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 42,76 → 48,77 0.005813 ΔE 1.1 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 208,92 → 216,93 0.004650 ΔE 1.1 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 189,63 → 193,64 0.003875 ΔE 1.6 ΔRGB(-2,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 201,92 → 208,92 0.003617 ΔE 1.1 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 216,92 → 220,94 0.003229 ΔE 1.1 ΔRGB(-2,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,92 → 384,93 0.003100 ΔE 1.1 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 198,91 → 200,92 0.001550 ΔE 1.1 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline Missing 382,92 → 384,93 0.001292 candidate lacks paint present in reference (0.001292%) AntialiasCoverage 49,74 → 49,76 0.001033 ΔRGB(0,-31,-24) antialiasing coverage residue on a shared outline Missing 364,91 → 366,91 0.000904 candidate lacks paint present in reference (0.000904%) Missing 372,92 → 373,92 0.000904 candidate lacks paint present in reference (0.000904%) Missing 379,92 → 381,92 0.000904 candidate lacks paint present in reference (0.000904%) Missing 29,76 → 30,76 0.000775 candidate lacks paint present in reference (0.000775%) Missing 36,76 → 38,76 0.000775 candidate lacks paint present in reference (0.000775%) Missing 44,77 → 45,77 0.000775 candidate lacks paint present in reference (0.000775%) Missing 47,77 → 49,77 0.000775 candidate lacks paint present in reference (0.000775%) Missing 51,77 → 52,77 0.000775 candidate lacks paint present in reference (0.000775%) Missing 54,78 → 56,78 0.000775 candidate lacks paint present in reference (0.000775%) Missing 62,78 → 63,78 0.000775 candidate lacks paint present in reference (0.000775%) Missing 368,92 → 370,92 0.000775 candidate lacks paint present in reference (0.000775%) Missing 375,92 → 377,92 0.000775 candidate lacks paint present in reference (0.000775%) Missing 33,76 → 34,76 0.000646 candidate lacks paint present in reference (0.000646%) Missing 40,76 → 41,76 0.000646 candidate lacks paint present in reference (0.000646%) Missing 58,78 → 60,78 0.000646 candidate lacks paint present in reference (0.000646%) Missing 66,79 → 67,79 0.000646 candidate lacks paint present in reference (0.000646%) Missing 69,79 → 70,79 0.000646 candidate lacks paint present in reference (0.000646%) Missing 199,92 → 200,92 0.000646 candidate lacks paint present in reference (0.000646%) Missing 203,92 → 204,92 0.000646 candidate lacks paint present in reference (0.000646%) Missing 206,92 → 208,92 0.000646 candidate lacks paint present in reference (0.000646%) Missing 210,92 → 211,92 0.000646 candidate lacks paint present in reference (0.000646%) Missing 214,93 → 215,93 0.000646 candidate lacks paint present in reference (0.000646%) Missing 217,93 → 219,93 0.000646 candidate lacks paint present in reference (0.000646%) Missing 230,62 → 230,63 0.000388 candidate lacks paint present in reference (0.000388%) Missing 220,92 → 220,92 0.000388 candidate lacks paint present in reference (0.000388%) AntialiasCoverage 200,64 → 201,64 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 373,89 → 373,90 0.000388 ΔRGB(1,-12,-10) antialiasing coverage residue on a shared outline AntialiasCoverage 208,91 → 208,92 0.000388 ΔRGB(-2,-31,-24) antialiasing coverage residue on a shared outline AntialiasCoverage 384,91 → 384,91 0.000388 ΔRGB(-6,-2,0) antialiasing coverage residue on a shared outline AntialiasCoverage 385,91 → 385,92 0.000388 ΔE 0.5 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline Missing 50,77 → 50,77 0.000258 candidate lacks paint present in reference (0.000258%) Missing 220,92 → 220,92 0.000258 candidate lacks paint present in reference (0.000258%) AntialiasCoverage 385,92 → 385,93 0.000258 ΔE 0.8 ΔRGB(-2,-1,0) antialiasing coverage residue on a shared outline Missing 231,62 → 231,62 0.000129 candidate lacks paint present in reference (0.000129%) Missing 231,64 → 231,64 0.000129 candidate lacks paint present in reference (0.000129%) Extra 28,75 → 28,75 0.000129 candidate adds paint absent from reference (0.000129%) AntialiasCoverage 70,78 → 70,78 0.000129 ΔRGB(1,8,7) antialiasing coverage residue on a shared outline AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 413,86 → 413,86 0.000129 ΔRGB(13,11,9) antialiasing coverage residue on a shared outline AntialiasCoverage 209,89 → 209,89 0.000129 ΔRGB(0,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 384,90 → 384,90 0.000129 ΔRGB(-1,25,21) antialiasing coverage residue on a shared outline AntialiasCoverage 220,91 → 220,91 0.000129 ΔRGB(-1,20,16) antialiasing coverage residue on a shared outline AntialiasCoverage 220,92 → 220,92 0.000129 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 219,92 → 219,92 0.000129 ΔRGB(1,8,7) antialiasing coverage residue on a shared outline AntialiasCoverage 384,93 → 384,93 0.000129 ΔE 1.6 ΔRGB(6,2,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-text-advanced-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>text-advanced x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-text-advanced f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.08% · raw 0.08% (856 px) interactions-cartesian-effects-x-lists-counters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 12.2
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and lists-counters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (8 total; showing 8 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 8 856 181,36 → 408,86 381 total 0.1% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 354,67 → 408,67 0.02 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 242,75 → 246,86 0.01 ΔRGB(24,25,25) antialiasing coverage residue on a shared outline AntialiasCoverage 237,75 → 238,86 0.009559 ΔRGB(-20,-19,-17) antialiasing coverage residue on a shared outline AntialiasCoverage 242,81 → 244,85 0.005167 ΔRGB(-29,-31,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 242,76 → 244,80 0.004650 ΔRGB(-28,-26,-24) antialiasing coverage residue on a shared outline AntialiasCoverage 239,81 → 239,85 0.003617 ΔRGB(71,66,60) antialiasing coverage residue on a shared outline AntialiasCoverage 239,76 → 239,80 0.003100 ΔRGB(68,64,59) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-lists-counters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x lists-counters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-lists-counters {counter-reset:pair-item;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.05% · raw 0.08% (837 px) interactions-cartesian-block-box-model-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.006577% extra 0.001495% ΔE 1.8
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for block-box-model and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (15 total; showing 15 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 6 810 25,62 → 395,97 280 total 0.1% · largest 0.04% · max ΔE 3.5 Extra 1 5 395,62 → 395,64 5 total 0.000646% · largest 0.000646% Missing 8 22 66,63 → 382,97 4 total 0.002842% · largest 0.000517%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 25,80 → 67,82 0.04 ΔE 1.1 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,91 → 382,93 0.02 ΔE 1.6 ΔRGB(2,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 196,95 → 218,97 0.01 ΔE 3.5 ΔRGB(-13,-5,0) antialiasing coverage residue on a shared outline AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline Extra 395,62 → 395,64 0.000646 candidate adds paint absent from reference (0.000646%) Missing 381,91 → 382,91 0.000517 candidate lacks paint present in reference (0.000517%) Missing 360,92 → 360,93 0.000517 candidate lacks paint present in reference (0.000517%) Missing 353,63 → 353,64 0.000388 candidate lacks paint present in reference (0.000388%) Missing 66,80 → 67,80 0.000388 candidate lacks paint present in reference (0.000388%) Missing 217,95 → 218,95 0.000388 candidate lacks paint present in reference (0.000388%) Missing 196,96 → 196,97 0.000388 candidate lacks paint present in reference (0.000388%) AntialiasCoverage 66,80 → 67,80 0.000388 ΔE 0.4 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline Missing 371,93 → 371,93 0.000129 candidate lacks paint present in reference (0.000129%) Missing 382,93 → 382,93 0.000129 candidate lacks paint present in reference (0.000129%)
source · cases/interactions/interactions-cartesian-block-box-model-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>block-box-model x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-block-box-model {box-sizing:border-box;padding:11px 7px;min-width:92px;max-width:132px;}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-block-box-model f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-block-box-model"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-block-box-model"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.08% · raw 0.08% (304 px) interactions-cartesian-images-replaced-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages PASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 35.3
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Physical-page-context interaction for page-margins and images-replaced: the images-replaced representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
regions (3 total; showing 3 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 3 304 75,41 → 109,65 152 total 0.08% · largest 0.04%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 109,41 → 109,65 0.04 ΔRGB(-4,-27,-69) antialiasing coverage residue on a shared outline AntialiasCoverage 75,41 → 75,65 0.02 ΔRGB(131,140,147) antialiasing coverage residue on a shared outline AntialiasCoverage 89,41 → 89,65 0.02 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-images-replaced-x-page-margins.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>images-replaced x page-margins interaction</title>
6 <style>
7 @page {
8 size: 192px 200px;
9 margin: 16px;
10 background: #ffd6d6;
11 }
12 @page :left { margin: 8px 32px 24px 8px; }
13 @page :right { margin: 16px 8px 8px 32px; }
14 @page :first { margin: 32px 8px 16px 24px; }
15
16 @font-face {
17 font-family: MatrixSans;
18 src: url('../../fonts/ParitySans.ttf') format('truetype');
19 font-style: normal;
20 font-weight: 400;
21 }
22 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
23 * { box-sizing: border-box; margin: 0; }
24 html, body { background: #ffffff; }
25 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
26 .stage {
27 display: inline-flex;
28 width: 156px;
29 min-height: 164px;
30 margin-right: 8px;
31 align-items: center;
32 justify-content: center;
33 background: #f7fafc;
34 border: 1px solid #cbd5e1;
35 font-size: 16px;
36 vertical-align: top;
37 }
38 .stage:last-child { margin-right: 0; }
39 .node {
40 width: 126px;
41 padding: 7px;
42 border: 2px solid #577590;
43 background-color: #e7f5ff;
44 color: #17324d;
45 }
46 .node.inner {
47 width: 58px;
48 height: 48px;
49 padding: 5px;
50 }
51 .node.outer { min-height: 96px; }
52 .own { height: 22px; white-space: nowrap; }
53 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
54 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
55 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
56 .f-images-replaced > .own > .asset { display: inline-block; }
57 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
58 .f-lists-counters > .own > .token { counter-increment: pair-item; }
59 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
60 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
61 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
62 @supports (display:grid) {
63 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
64 }
65 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
66
67 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
68 .stage { display: block; margin: 0; break-before: page; }
69 .stage > .node { min-height: 68px; margin: 47px auto 0; }
70 .stage > .node.outer { margin-top: 33px; }
71
72 /* The three compositions occupy first/right, left, and later-right pages.
73 Their asymmetric page areas expose side selection, cascade, content
74 origin, bottom capacity, and paint that crosses a page-area edge.
75 Horizontal body padding is a distinct root-flow gutter: each stage
76 deliberately shifts through it to the physical page-area start edge. */
77 body { padding-left: 8px; padding-right: 8px; }
78 .stage {
79 width: 152px;
80 height: 128px;
81 min-height: 128px;
82 margin-left: -8px;
83 border: 0;
84 background: #d8f3dc;
85 }
86 .node { width: 100%; }
87 .stage > .node,
88 .stage > .node.outer { margin: 0; }
89 .f-images-replaced {}
90 .f-page-margins {}
91 </style>
92 </head>
93 <body>
94 <div class="stage"><div class="node f-images-replaced f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
95 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-page-margins"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
96 <div class="stage"><div class="node outer f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
97 </body>
98 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.07% · raw 0.08% (284 px) interactions-cartesian-paged-media-x-text-advanced · same-element-and-bidirectional-nesting · 4 pages PASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.005672% ΔE 1.6
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for paged-media and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (5 total; showing 5 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 Missing 3 5 25,76 → 67,78 3 total 0.002005% · largest 0.001203% ColorErr 2 279 25,76 → 67,78 277 total 0.1% · largest 0.1% · max ΔE 1.6
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 25,76 → 67,78 0.1 ΔE 1.6 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline Missing 66,76 → 67,76 0.001203 candidate lacks paint present in reference (0.001203%) AntialiasCoverage 25,77 → 25,77 0.000802 ΔRGB(4,2,0) antialiasing coverage residue on a shared outline Missing 25,78 → 25,78 0.000401 candidate lacks paint present in reference (0.000401%) Missing 46,78 → 46,78 0.000401 candidate lacks paint present in reference (0.000401%)
source · cases/interactions/interactions-cartesian-paged-media-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>paged-media x text-advanced interaction</title>
6 <style>
7 @page { size: 192px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 min-height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 padding: 7px;
35 border: 2px solid #577590;
36 background-color: #e7f5ff;
37 color: #17324d;
38 }
39 .node.inner {
40 width: 58px;
41 height: 48px;
42 padding: 5px;
43 }
44 .node.outer { min-height: 96px; }
45 .own { height: 22px; white-space: nowrap; }
46 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
47 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
48 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
49 .f-images-replaced > .own > .asset { display: inline-block; }
50 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
51 .f-lists-counters > .own > .token { counter-increment: pair-item; }
52 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
53 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
54 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
55 @supports (display:grid) {
56 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
57 }
58 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
59
60 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
61 .stage { display: block; margin: 0; break-before: page; }
62 .stage > .node { min-height: 68px; margin: 47px auto 0; }
63 .stage > .node.outer { margin-top: 33px; }
64 .f-paged-media {break-before:page;break-inside:avoid;}
65 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
66 </style>
67 </head>
68 <body>
69 <div class="stage"><div class="node f-paged-media f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
70 <div class="stage"><div class="node outer f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
71 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-paged-media"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
72 </body>
73 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.07% · raw 0.07% (277 px) interactions-cartesian-page-margins-x-selectors-cascade · physical-page-context-and-nested-feature-depths · 3 pages PASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 12.5
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff why: page 3: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Physical-page-context interaction for page-margins and selectors-cascade: the selectors-cascade representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
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 277 32,16 → 184,104 276 total 0.07% · largest 0.07%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 32,16 → 32,104 0.07 ΔRGB(32,0,7) antialiasing coverage residue on a shared outline AntialiasCoverage 184,16 → 184,16 0.000267 ΔRGB(4,0,1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-page-margins-x-selectors-cascade.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>page-margins x selectors-cascade interaction</title>
6 <style>
7 @page {
8 size: 192px 200px;
9 margin: 16px;
10 background: #ffd6d6;
11 }
12 @page :left { margin: 8px 32px 24px 8px; }
13 @page :right { margin: 16px 8px 8px 32px; }
14 @page :first { margin: 32px 8px 16px 24px; }
15
16 @font-face {
17 font-family: MatrixSans;
18 src: url('../../fonts/ParitySans.ttf') format('truetype');
19 font-style: normal;
20 font-weight: 400;
21 }
22 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
23 * { box-sizing: border-box; margin: 0; }
24 html, body { background: #ffffff; }
25 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
26 .stage {
27 display: inline-flex;
28 width: 156px;
29 min-height: 164px;
30 margin-right: 8px;
31 align-items: center;
32 justify-content: center;
33 background: #f7fafc;
34 border: 1px solid #cbd5e1;
35 font-size: 16px;
36 vertical-align: top;
37 }
38 .stage:last-child { margin-right: 0; }
39 .node {
40 width: 126px;
41 padding: 7px;
42 border: 2px solid #577590;
43 background-color: #e7f5ff;
44 color: #17324d;
45 }
46 .node.inner {
47 width: 58px;
48 height: 48px;
49 padding: 5px;
50 }
51 .node.outer { min-height: 96px; }
52 .own { height: 22px; white-space: nowrap; }
53 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
54 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
55 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
56 .f-images-replaced > .own > .asset { display: inline-block; }
57 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
58 .f-lists-counters > .own > .token { counter-increment: pair-item; }
59 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
60 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
61 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
62 @supports (display:grid) {
63 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
64 }
65 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
66
67 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
68 .stage { display: block; margin: 0; break-before: page; }
69 .stage > .node { min-height: 68px; margin: 47px auto 0; }
70 .stage > .node.outer { margin-top: 33px; }
71
72 /* The three compositions occupy first/right, left, and later-right pages.
73 Their asymmetric page areas expose side selection, cascade, content
74 origin, bottom capacity, and paint that crosses a page-area edge.
75 Horizontal body padding is a distinct root-flow gutter: each stage
76 deliberately shifts through it to the physical page-area start edge. */
77 body { padding-left: 8px; padding-right: 8px; }
78 .stage {
79 width: 152px;
80 height: 128px;
81 min-height: 128px;
82 margin-left: -8px;
83 border: 0;
84 background: #d8f3dc;
85 }
86 .node { width: 100%; }
87 .stage > .node,
88 .stage > .node.outer { margin: 0; }
89 .f-page-margins {}
90 .f-selectors-cascade {}
91 </style>
92 </head>
93 <body>
94 <div class="stage"><div class="node f-page-margins f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
95 <div class="stage"><div class="node outer f-page-margins"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-selectors-cascade"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
96 <div class="stage"><div class="node outer f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-page-margins"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
97 </body>
98 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.06% · raw 0.07% (739 px) interactions-cartesian-overflow-clipping-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.005084% extra 0.001816% ΔE 1.8
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for overflow-clipping and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (13 total; showing 13 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 6 720 25,62 → 395,93 281 total 0.09% · largest 0.04% · max ΔE 1.9 Extra 1 5 395,62 → 395,64 5 total 0.000646% · largest 0.000646% Missing 6 14 66,63 → 382,93 5 total 0.001808% · largest 0.000646%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 25,81 → 67,83 0.04 ΔE 1.6 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,91 → 382,93 0.02 ΔE 1.7 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,92 → 360,93 0.000904 ΔE 0.8 ΔRGB(-2,0,0) antialiasing coverage residue on a shared outline Missing 381,91 → 382,91 0.000646 candidate lacks paint present in reference (0.000646%) Extra 395,62 → 395,64 0.000646 candidate adds paint absent from reference (0.000646%) Missing 353,63 → 353,64 0.000388 candidate lacks paint present in reference (0.000388%) Missing 66,81 → 67,81 0.000388 candidate lacks paint present in reference (0.000388%) AntialiasCoverage 381,91 → 381,91 0.000388 ΔE 1.3 ΔRGB(4,2,0) antialiasing coverage residue on a shared outline Missing 360,93 → 360,93 0.000129 candidate lacks paint present in reference (0.000129%) Missing 371,93 → 371,93 0.000129 candidate lacks paint present in reference (0.000129%) Missing 382,93 → 382,93 0.000129 candidate lacks paint present in reference (0.000129%)
source · cases/interactions/interactions-cartesian-overflow-clipping-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>overflow-clipping x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-overflow-clipping {overflow:hidden;max-height:58px;border-radius:9px;}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-overflow-clipping f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-overflow-clipping"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.07% · raw 0.07% (731 px) interactions-cartesian-effects-x-images-replaced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 27.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and images-replaced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (6 total; showing 6 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 6 731 80,36 → 408,96 381 total 0.09% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 408,43 → 408,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 80,57 → 80,81 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 231,72 → 231,96 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 371,67 → 394,67 0.009171 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 354,67 → 370,67 0.006588 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-images-replaced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x images-replaced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-images-replaced {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.05% · raw 0.07% (693 px) interactions-cartesian-positioning-x-text-advanced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.006870% extra 0.002689% ΔE 1.8
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for positioning and text-advanced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (16 total; showing 16 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 7 661 25,62 → 395,93 268 total 0.09% · largest 0.03% · max ΔE 1.9 Extra 2 9 371,62 → 395,92 5 total 0.001163% · largest 0.000646% Missing 7 23 45,63 → 371,93 5 total 0.002971% · largest 0.000646%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 353,63 → 395,64 0.03 ΔE 1.9 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 196,91 → 218,93 0.02 ΔE 1.6 ΔRGB(-3,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 25,76 → 46,78 0.02 ΔE 1.6 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,91 → 371,93 0.01 ΔE 1.6 ΔRGB(-1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 394,62 → 395,62 0.001033 ΔE 1.9 ΔRGB(-4,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 207,92 → 207,92 0.000775 ΔE 1.7 ΔRGB(5,3,0) antialiasing coverage residue on a shared outline Missing 196,92 → 196,93 0.000646 candidate lacks paint present in reference (0.000646%) Extra 395,62 → 395,64 0.000646 candidate adds paint absent from reference (0.000646%) Missing 360,92 → 360,93 0.000517 candidate lacks paint present in reference (0.000517%) Extra 371,92 → 371,92 0.000517 candidate adds paint absent from reference (0.000517%) Missing 353,63 → 353,64 0.000388 candidate lacks paint present in reference (0.000388%) Missing 45,76 → 46,76 0.000388 candidate lacks paint present in reference (0.000388%) Missing 217,91 → 218,91 0.000388 candidate lacks paint present in reference (0.000388%) Missing 370,91 → 371,91 0.000388 candidate lacks paint present in reference (0.000388%) AntialiasCoverage 196,92 → 196,92 0.000388 ΔE 1.3 ΔRGB(4,2,0) antialiasing coverage residue on a shared outline Missing 207,93 → 207,93 0.000258 candidate lacks paint present in reference (0.000258%)
source · cases/interactions/interactions-cartesian-positioning-x-text-advanced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>positioning x text-advanced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-positioning {position:relative;}
61 .f-text-advanced {text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#ef476f;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:1px 1px 0 #fff;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-positioning f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-text-advanced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-text-advanced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-positioning"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.07% · raw 0.07% (665 px) interactions-cartesian-effects-x-overflow-clipping · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 7.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and overflow-clipping: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3 total; showing 3 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 3 665 139,36 → 409,109 381 total 0.09% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 359,109 → 409,109 0.02 ΔRGB(4,-10,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 139,61 → 139,102 0.02 ΔRGB(3,-4,-19) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-overflow-clipping.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x overflow-clipping interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-overflow-clipping {overflow:hidden;max-height:58px;border-radius:9px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-overflow-clipping"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.03% · raw 0.06% (649 px) interactions-cartesian-color-opacity-x-lists-counters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 7.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for color-opacity and lists-counters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (77 total; showing 64 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 77 649 237,75 → 380,86 104 total 0.08% · largest 0.01%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 242,75 → 246,86 0.01 ΔRGB(22,22,21) antialiasing coverage residue on a shared outline AntialiasCoverage 237,75 → 238,86 0.009559 ΔRGB(-15,-15,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 242,81 → 244,85 0.005167 ΔRGB(-24,-24,-24) antialiasing coverage residue on a shared outline AntialiasCoverage 373,81 → 377,85 0.004909 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,75 → 371,86 0.004650 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 242,76 → 244,80 0.004650 ΔRGB(-21,-20,-19) antialiasing coverage residue on a shared outline AntialiasCoverage 373,76 → 376,80 0.003875 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 239,81 → 239,85 0.003617 ΔRGB(54,51,45) antialiasing coverage residue on a shared outline AntialiasCoverage 239,76 → 239,80 0.003100 ΔRGB(52,48,45) antialiasing coverage residue on a shared outline AntialiasCoverage 361,84 → 367,84 0.002971 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,82 → 366,82 0.001679 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 372,75 → 375,75 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,75 → 365,76 0.001292 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,75 → 379,76 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 364,78 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,77 → 379,78 0.000904 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,81 → 361,82 0.000904 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,86 → 378,86 0.000904 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,77 → 366,79 0.000775 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,84 → 369,86 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,80 → 366,81 0.000646 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,82 → 368,83 0.000646 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,76 → 363,77 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,78 → 362,78 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,78 → 365,79 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 367,80 → 367,80 0.000517 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,81 → 367,82 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 380,84 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,86 → 361,86 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,79 → 362,79 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,79 → 379,79 0.000388 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,79 → 377,79 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,81 → 379,81 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,82 → 380,83 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,83 → 378,83 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,84 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,84 → 378,84 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,85 → 379,85 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 359,85 → 359,86 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,75 → 376,75 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,76 → 365,76 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,76 → 365,76 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 377,76 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,77 → 366,77 0.000258 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,77 → 378,78 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,78 → 363,79 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 361,80 → 361,80 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,80 → 363,80 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,80 → 378,80 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,80 → 363,81 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,80 → 378,80 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,81 → 362,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,81 → 377,81 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 366,82 → 366,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,82 → 378,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,83 → 360,84 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 360,84 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,85 → 361,85 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,85 → 377,85 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,85 → 367,85 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,85 → 379,86 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,86 → 368,86 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,86 → 369,86 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,77 → 377,77 0.000129 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-lists-counters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x lists-counters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-color-opacity {color:#5a189a;opacity:.76;}
61 .f-lists-counters {counter-reset:pair-item;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-color-opacity f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.06% · raw 0.06% (641 px) interactions-cartesian-grid-x-positioning · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 43.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for grid and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (15 total; showing 15 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 15 641 114,94 → 133,109 146 total 0.08% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 127,103 → 133,109 0.02 ΔRGB(-206,-193,-176) antialiasing coverage residue on a shared outline AntialiasCoverage 116,95 → 121,99 0.02 ΔRGB(-204,-192,-175) antialiasing coverage residue on a shared outline AntialiasCoverage 116,100 → 122,103 0.01 ΔRGB(-138,-129,-118) antialiasing coverage residue on a shared outline AntialiasCoverage 129,98 → 132,105 0.009430 ΔRGB(-101,-96,-87) antialiasing coverage residue on a shared outline AntialiasCoverage 125,99 → 126,104 0.005167 ΔRGB(-113,-106,-97) antialiasing coverage residue on a shared outline AntialiasCoverage 122,103 → 124,106 0.005038 ΔRGB(-181,-170,-155) antialiasing coverage residue on a shared outline AntialiasCoverage 114,102 → 115,106 0.004650 ΔRGB(-188,-176,-161) antialiasing coverage residue on a shared outline AntialiasCoverage 132,97 → 133,99 0.003229 ΔRGB(-72,-68,-62) antialiasing coverage residue on a shared outline AntialiasCoverage 128,97 → 131,98 0.002583 ΔRGB(-85,-80,-73) antialiasing coverage residue on a shared outline AntialiasCoverage 128,105 → 129,106 0.001421 ΔRGB(-87,-82,-74) antialiasing coverage residue on a shared outline AntialiasCoverage 121,99 → 122,100 0.001163 ΔRGB(-75,-70,-64) antialiasing coverage residue on a shared outline AntialiasCoverage 118,94 → 120,94 0.000904 ΔRGB(-52,-49,-45) antialiasing coverage residue on a shared outline AntialiasCoverage 128,104 → 129,104 0.000258 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 129,98 → 129,98 0.000129 ΔRGB(-1,-1,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 122,100 → 122,100 0.000129 ΔRGB(-11,-10,-9) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-grid-x-positioning.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>grid x positioning interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-grid {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px;}
61 .f-positioning {position:relative;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-grid f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-positioning"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-grid"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.06% (638 px) interactions-cartesian-color-opacity-x-color-opacity · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.4
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for color-opacity and color-opacity: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (154 total; showing 64 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 154 638 195,75 → 380,86 36 total 0.08% · largest 0.004650%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 207,75 → 207,86 0.004650 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 371,75 → 371,86 0.004650 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 209,76 → 212,80 0.003875 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 373,76 → 376,80 0.003875 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 211,85 0.002713 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 373,81 → 375,85 0.002713 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 197,84 → 203,84 0.002325 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,84 → 366,84 0.002325 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 198,82 → 202,82 0.001679 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,82 → 366,82 0.001679 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 207,75 → 211,75 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 372,75 → 375,75 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 209,81 → 212,81 0.001550 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 373,81 → 377,81 0.001550 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 199,75 → 201,76 0.001292 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,75 → 365,76 0.001292 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 213,75 → 214,76 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,75 → 379,76 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 200,76 → 200,78 0.001033 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 364,78 0.001033 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,86 → 214,86 0.000904 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,86 → 378,86 0.000904 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 197,81 → 197,82 0.000646 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 361,81 → 361,82 0.000646 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 198,76 → 199,77 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,76 → 363,77 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 215,77 → 215,77 0.000517 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,77 → 379,77 0.000517 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 198,78 → 198,78 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,78 → 362,78 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 201,78 → 201,79 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 365,78 → 365,79 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 203,80 → 203,80 0.000517 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,80 → 367,80 0.000517 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 203,81 → 204,82 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 367,81 → 367,82 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 204,82 → 204,83 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,82 → 368,83 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 215,84 → 215,84 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 380,84 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 205,84 → 205,85 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 369,84 → 369,85 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 196,86 → 197,86 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,86 → 361,86 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 198,79 → 198,79 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 215,79 → 215,79 0.000388 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,79 → 362,79 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,79 → 379,79 0.000388 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,81 → 215,81 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,81 → 379,81 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 215,82 → 215,83 0.000388 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 380,82 → 380,83 0.000388 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 204,84 → 204,84 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,84 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 213,84 → 214,84 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,84 → 378,84 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 203,84 → 203,84 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 367,84 → 367,84 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 215,85 → 215,85 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,85 → 379,85 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 212,85 → 212,85 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,85 → 377,85 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 195,85 → 195,86 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 359,85 → 359,86 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-color-opacity.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x color-opacity interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-color-opacity {color:#5a189a;opacity:.76;}
61 </style>
62 </head>
63 <body>
64 <div class="stage"><div class="node f-color-opacity f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
65 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
66 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 </body>
68 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.06% · raw 0.06% (636 px) interactions-cartesian-multicol-x-multicol · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 37.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for multicol and multicol: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (4 total; showing 4 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 4 636 274,50 → 440,84 212 total 0.08% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 437,50 → 438,84 0.03 ΔRGB(-144,-128,-111) antialiasing coverage residue on a shared outline AntialiasCoverage 439,50 → 440,84 0.03 ΔRGB(144,128,111) antialiasing coverage residue on a shared outline AntialiasCoverage 274,50 → 274,84 0.01 ΔRGB(-144,-128,-111) antialiasing coverage residue on a shared outline AntialiasCoverage 276,50 → 276,84 0.01 ΔRGB(144,128,111) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-multicol-x-multicol.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>multicol x multicol interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
61 </style>
62 </head>
63 <body>
64 <div class="stage"><div class="node f-multicol f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
65 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
66 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 </body>
68 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.02% · raw 0.06% (571 px) interactions-cartesian-color-opacity-x-images-replaced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 25.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for color-opacity and images-replaced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (74 total; showing 64 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 74 571 80,43 → 408,96 76 total 0.07% · largest 0.009817%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 408,43 → 408,67 0.009817 ΔRGB(170,-100,43) antialiasing coverage residue on a shared outline AntialiasCoverage 80,57 → 80,81 0.009817 ΔRGB(130,-76,137) antialiasing coverage residue on a shared outline AntialiasCoverage 231,72 → 231,96 0.009817 ΔRGB(130,-76,137) antialiasing coverage residue on a shared outline AntialiasCoverage 373,81 → 377,85 0.004909 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,75 → 371,86 0.004650 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 373,76 → 376,80 0.003875 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,84 → 367,84 0.002971 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,82 → 366,82 0.001679 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 372,75 → 375,75 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,75 → 365,76 0.001292 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,75 → 379,76 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 364,78 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,77 → 379,78 0.000904 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,81 → 361,82 0.000904 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,86 → 378,86 0.000904 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,77 → 366,79 0.000775 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,84 → 369,86 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,80 → 366,81 0.000646 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,82 → 368,83 0.000646 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,76 → 363,77 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,78 → 362,78 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,78 → 365,79 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 367,80 → 367,80 0.000517 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,81 → 367,82 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 380,84 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,86 → 361,86 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,79 → 362,79 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,79 → 379,79 0.000388 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,79 → 377,79 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,81 → 379,81 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,82 → 380,83 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,83 → 378,83 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,84 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,84 → 378,84 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,85 → 379,85 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 359,85 → 359,86 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,75 → 376,75 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,76 → 365,76 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,76 → 365,76 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 377,76 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,77 → 366,77 0.000258 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,77 → 378,78 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,78 → 363,79 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 361,80 → 361,80 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,80 → 363,80 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,80 → 378,80 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,80 → 363,81 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,80 → 378,80 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,81 → 362,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,81 → 377,81 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 366,82 → 366,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,82 → 378,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,83 → 360,84 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 360,84 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,85 → 361,85 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,85 → 377,85 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,85 → 367,85 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,85 → 379,86 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,86 → 368,86 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,86 → 369,86 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,77 → 377,77 0.000129 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,78 → 364,78 0.000129 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,78 → 378,78 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,79 → 377,79 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-images-replaced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x images-replaced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-color-opacity {color:#5a189a;opacity:.76;}
61 .f-images-replaced {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-color-opacity f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.05% · raw 0.05% (558 px) interactions-cartesian-backgrounds-borders-x-effects · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 8.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and effects: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (10 total; showing 10 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 10 558 17,36 → 467,110 381 total 0.07% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 345,36 → 467,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 191,68 → 245,68 0.02 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 20,55 → 20,55 0.000129 ΔRGB(-2,1,8) antialiasing coverage residue on a shared outline AntialiasCoverage 136,55 → 136,55 0.000129 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 17,57 → 17,57 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,68 → 362,68 0.000129 ΔRGB(6,7,5) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 20,109 → 20,109 0.000129 ΔRGB(0,0,2) antialiasing coverage residue on a shared outline AntialiasCoverage 362,110 → 362,110 0.000129 ΔRGB(15,14,12) antialiasing coverage residue on a shared outline AntialiasCoverage 361,110 → 361,110 0.000129 ΔRGB(-9,-8,-8) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-effects.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x effects interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.05% · raw 0.05% (550 px) interactions-cartesian-effects-x-flexbox · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 8.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and flexbox: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 550 181,36 → 457,60 381 total 0.07% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 403,60 → 457,60 0.02 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-flexbox.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x flexbox interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-flexbox {display:flex;align-items:center;justify-content:space-around;gap:4px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-flexbox"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.05% · raw 0.05% (550 px) interactions-cartesian-effects-x-grid · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 8.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and grid: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 550 181,36 → 458,60 381 total 0.07% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 404,60 → 458,60 0.02 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-grid.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x grid interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-grid {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-grid"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.05% · raw 0.05% (550 px) interactions-cartesian-effects-x-positioning · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 8.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 550 181,36 → 408,67 381 total 0.07% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 354,67 → 408,67 0.02 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-positioning.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x positioning interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-positioning {position:relative;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-positioning"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.05% · raw 0.05% (550 px) interactions-cartesian-effects-x-selectors-cascade · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 8.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 550 181,36 → 408,67 381 total 0.07% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 354,67 → 408,67 0.02 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-selectors-cascade.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x selectors-cascade interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-selectors-cascade {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-selectors-cascade"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.05% · raw 0.05% (550 px) interactions-cartesian-effects-x-typography · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 8.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 550 181,36 → 408,67 381 total 0.07% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 354,67 → 408,67 0.02 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-typography.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x typography interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-typography {font-size:18px;font-weight:700;letter-spacing:.7px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-typography"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.05% · raw 0.05% (550 px) interactions-cartesian-effects-x-units-values · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 8.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 550 181,36 → 399,67 381 total 0.07% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline AntialiasCoverage 345,67 → 399,67 0.02 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-units-values.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x units-values interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-units-values {width:calc(100% - 9px);padding-left:5%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-units-values"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.05% · raw 0.05% (510 px) interactions-cartesian-generated-content-x-grid · same-element-and-bidirectional-nestingPASS via CSS-scale observation: balanced edge coverage ColorValue ΔE 51.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill recolour ΔRGB(-1,-2,-2) (ΔE 51.7)
Cartesian family interaction for generated-content and grid: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3 total; showing 3 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 3 510 25,63 → 29,100 327 total 0.07% · largest 0.04% · max ΔE 51.7
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 25,63 → 29,74 0.04 ΔE 51.7 ΔRGB(-1,-4,-4) fill recolour ΔRGB(-1,-4,-4) (ΔE 51.7) ColorValue 25,91 → 29,100 0.02 ΔRGB(3,2,2) fill recolour ΔRGB(+3,+2,+2) (ΔE 0) ColorValue 25,93 → 27,98 0.008009 ΔRGB(-3,-2,-2) fill recolour ΔRGB(-3,-2,-2) (ΔE 0)
source · cases/interactions/interactions-cartesian-generated-content-x-grid.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>generated-content x grid interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-generated-content {}
61 .f-grid {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-generated-content f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-grid"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-generated-content"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.05% · raw 0.05% (485 px) interactions-cartesian-overflow-clipping-x-selectors-cascade · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage Extra extra 0.2% ΔE 4.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw candidate adds paint absent from reference (0.2%)
Cartesian family interaction for overflow-clipping and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (5 total; showing 5 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 Extra 2 473 15,53 → 133,102 345 total 0.06% · largest 0.04% ColorErr 3 12 15,53 → 138,108 10 total 0.001550% · largest 0.001292%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason Extra 23,53 → 133,53 0.04 candidate adds paint absent from reference (0.04%) Extra 15,61 → 15,102 0.02 candidate adds paint absent from reference (0.02%) AntialiasCoverage 137,107 → 138,108 0.001292 ΔRGB(12,-7,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 133,53 → 133,53 0.000129 ΔRGB(-7,-6,-5) antialiasing coverage residue on a shared outline AntialiasCoverage 15,102 → 15,102 0.000129 ΔRGB(-4,-1,-2) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-overflow-clipping-x-selectors-cascade.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>overflow-clipping x selectors-cascade interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-overflow-clipping {overflow:hidden;max-height:58px;border-radius:9px;}
61 .f-selectors-cascade {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-overflow-clipping f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-selectors-cascade"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-overflow-clipping"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.05% · raw 0.05% (475 px) interactions-cartesian-effects-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: coherent sub-authored colour frontier AntialiasCoverage ΔE 9.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (18 total; showing 18 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 18 475 139,36 → 413,121 381 total 0.06% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline ColorValue 412,82 → 412,84 0.000904 ΔRGB(4,-6,-30) fill recolour ΔRGB(+4,-6,-30) (ΔE 0) ColorValue 411,89 → 411,91 0.000904 ΔRGB(4,-6,-30) fill recolour ΔRGB(+4,-6,-30) (ΔE 0) ColorValue 141,98 → 141,100 0.000904 ΔRGB(4,-6,-30) fill recolour ΔRGB(+4,-6,-30) (ΔE 0) ColorValue 140,106 → 140,108 0.000904 ΔRGB(4,-6,-30) fill recolour ΔRGB(+4,-6,-30) (ΔE 0) ColorValue 144,62 → 144,63 0.000775 ΔRGB(8,-5,-22) fill recolour ΔRGB(+8,-5,-22) (ΔE 0) ColorValue 143,69 → 143,71 0.000775 ΔRGB(9,-5,-22) fill recolour ΔRGB(+9,-5,-22) (ΔE 0) ColorValue 412,75 → 412,76 0.000775 ΔRGB(7,-4,-19) fill recolour ΔRGB(+7,-4,-19) (ΔE 0) ColorValue 143,76 → 143,78 0.000775 ΔRGB(8,-4,-19) fill recolour ΔRGB(+8,-4,-19) (ΔE 0) ColorValue 142,84 → 142,85 0.000775 ΔRGB(8,-4,-19) fill recolour ΔRGB(+8,-4,-19) (ΔE 0) ColorValue 141,91 → 141,93 0.000775 ΔRGB(7,-4,-19) fill recolour ΔRGB(+7,-4,-19) (ΔE 0) ColorValue 410,96 → 410,98 0.000775 ΔRGB(8,-8,-32) fill recolour ΔRGB(+8,-8,-32) (ΔE 0) ColorValue 410,104 → 410,105 0.000775 ΔRGB(8,-5,-22) fill recolour ΔRGB(+8,-5,-22) (ΔE 0) ColorValue 409,111 → 409,113 0.000775 ΔRGB(8,-4,-19) fill recolour ΔRGB(+8,-4,-19) (ΔE 0) ColorValue 140,113 → 140,115 0.000775 ΔRGB(8,-8,-32) fill recolour ΔRGB(+8,-8,-32) (ΔE 0) ColorValue 139,120 → 139,121 0.000517 ΔRGB(9,-12,-51) fill recolour ΔRGB(+9,-12,-51) (ΔE 0) AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 413,86 → 413,86 0.000129 ΔRGB(13,9,7) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.04% · raw 0.05% (458 px) interactions-cartesian-images-replaced-x-lists-counters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 36.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for images-replaced and lists-counters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (8 total; showing 8 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 8 458 111,43 → 246,86 104 total 0.06% · largest 0.01%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 242,75 → 246,86 0.01 ΔRGB(24,25,25) antialiasing coverage residue on a shared outline AntialiasCoverage 244,43 → 244,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 111,57 → 111,81 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 237,75 → 238,86 0.009559 ΔRGB(-20,-19,-17) antialiasing coverage residue on a shared outline AntialiasCoverage 242,81 → 244,85 0.005167 ΔRGB(-29,-31,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 242,76 → 244,80 0.004650 ΔRGB(-28,-26,-24) antialiasing coverage residue on a shared outline AntialiasCoverage 239,81 → 239,85 0.003617 ΔRGB(71,66,60) antialiasing coverage residue on a shared outline AntialiasCoverage 239,76 → 239,80 0.003100 ΔRGB(68,64,59) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-images-replaced-x-lists-counters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>images-replaced x lists-counters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-images-replaced {}
61 .f-lists-counters {counter-reset:pair-item;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-images-replaced f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.04% · raw 0.04% (424 px) interactions-cartesian-grid-x-multicol · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 37.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for grid and multicol: both representatives compose on one element and in both outer/inner orders. The standards-derived reference suppresses Chromium's rule beside an empty actual column, forces the CSS Multicol boundary Chromium misses, and corrects its print-only half-pixel second-fragment decoration snap while retaining Chromium's live text geometry.
regions (3 total; showing 3 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 3 424 410,43 → 466,91 150 total 0.05% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 410,43 → 410,91 0.02 ΔRGB(144,128,111) antialiasing coverage residue on a shared outline AntialiasCoverage 412,45 → 412,89 0.02 ΔRGB(-144,-128,-111) antialiasing coverage residue on a shared outline AntialiasCoverage 466,45 → 466,89 0.02 ΔRGB(144,128,111) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-grid-x-multicol.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>grid x multicol interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-grid {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px;}
61 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-grid f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-grid"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.04% · raw 0.04% (418 px) interactions-cartesian-multicol-x-units-values · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 37.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for multicol and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3 total; showing 3 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 3 418 77,57 → 371,107 156 total 0.05% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 77,57 → 77,107 0.02 ΔRGB(144,128,111) antialiasing coverage residue on a shared outline AntialiasCoverage 79,57 → 79,107 0.02 ΔRGB(-144,-128,-111) antialiasing coverage residue on a shared outline AntialiasCoverage 371,72 → 371,106 0.01 ΔRGB(144,128,111) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-multicol-x-units-values.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>multicol x units-values interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
61 .f-units-values {width:calc(100% - 9px);padding-left:5%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-multicol f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-units-values"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.04% · raw 0.04% (381 px) interactions-cartesian-block-box-model-x-effects · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 8.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for block-box-model and effects: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 381 345,36 → 467,36 381 total 0.05% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 345,36 → 467,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-block-box-model-x-effects.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>block-box-model x effects interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-block-box-model {box-sizing:border-box;padding:11px 7px;min-width:92px;max-width:132px;}
61 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-block-box-model f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-block-box-model"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-block-box-model"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.04% · raw 0.04% (381 px) interactions-cartesian-effects-x-generated-content · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 8.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and generated-content: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 381 181,36 → 303,36 381 total 0.05% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-generated-content.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x generated-content interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-generated-content {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-generated-content"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.04% · raw 0.04% (381 px) interactions-cartesian-effects-x-multicol · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 8.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and multicol: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 381 181,36 → 303,36 381 total 0.05% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-multicol.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x multicol interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.04% · raw 0.04% (381 px) interactions-cartesian-effects-x-tables · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 8.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for effects and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 381 181,36 → 303,36 381 total 0.05% · largest 0.05%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 181,36 → 303,36 0.05 ΔRGB(9,-12,-53) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-effects-x-tables.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>effects x tables interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-effects {box-shadow:7px 5px 0 rgba(239,71,111,.35),inset 0 0 0 2px #ffd166;}
61 .f-tables {display:table;border-collapse:separate;border-spacing:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-effects f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-effects"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-tables"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-effects"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.04% · raw 0.04% (380 px) interactions-cartesian-images-replaced-x-typography · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 70.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for images-replaced and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3 total; showing 3 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 3 380 88,43 → 399,96 228 total 0.05% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 88,57 → 89,81 0.03 ΔRGB(190,110,30) antialiasing coverage residue on a shared outline AntialiasCoverage 244,43 → 244,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 399,72 → 399,96 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-images-replaced-x-typography.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>images-replaced x typography interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-images-replaced {}
61 .f-typography {font-size:18px;font-weight:700;letter-spacing:.7px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-images-replaced f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-typography"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.04% · raw 0.04% (374 px) interactions-cartesian-clip-mask-x-generated-content · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-outline coverage AntialiasCoverage missing 0.009646% ΔE 3.8
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and generated-content: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (69 total; showing 64 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 63 344 192,84 → 410,132 126 total 0.04% · largest 0.02% · max ΔE 3.9 Missing 6 30 385,130 → 402,132 5 total 0.003875% · largest 0.000646%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 355,84 → 385,86 0.02 ΔE 3.9 ΔRGB(-51,-46,-40) antialiasing coverage residue on a shared outline AntialiasCoverage 367,128 → 386,130 0.01 ΔRGB(-51,-45,-39) antialiasing coverage residue on a shared outline AntialiasCoverage 352,126 → 354,126 0.001163 ΔRGB(50,44,38) antialiasing coverage residue on a shared outline AntialiasCoverage 387,130 → 389,130 0.001163 ΔRGB(85,70,56) antialiasing coverage residue on a shared outline AntialiasCoverage 393,131 → 395,131 0.001163 ΔRGB(85,70,56) antialiasing coverage residue on a shared outline AntialiasCoverage 399,131 → 401,132 0.001163 ΔRGB(85,70,56) antialiasing coverage residue on a shared outline AntialiasCoverage 390,130 → 392,130 0.001033 ΔRGB(98,81,65) antialiasing coverage residue on a shared outline AntialiasCoverage 396,131 → 398,131 0.001033 ΔRGB(88,74,62) antialiasing coverage residue on a shared outline AntialiasCoverage 402,132 → 404,132 0.001033 ΔRGB(88,74,62) antialiasing coverage residue on a shared outline AntialiasCoverage 408,88 → 410,88 0.000775 ΔRGB(-93,-82,-71) antialiasing coverage residue on a shared outline Missing 385,130 → 386,130 0.000646 candidate lacks paint present in reference (0.000646%) Missing 388,130 → 389,130 0.000646 candidate lacks paint present in reference (0.000646%) Missing 391,131 → 392,131 0.000646 candidate lacks paint present in reference (0.000646%) Missing 394,131 → 396,131 0.000646 candidate lacks paint present in reference (0.000646%) Missing 397,131 → 398,131 0.000646 candidate lacks paint present in reference (0.000646%) Missing 400,132 → 402,132 0.000646 candidate lacks paint present in reference (0.000646%) AntialiasCoverage 409,94 → 409,94 0.000258 ΔRGB(13,12,10) antialiasing coverage residue on a shared outline AntialiasCoverage 409,95 → 409,95 0.000258 ΔRGB(21,18,15) antialiasing coverage residue on a shared outline AntialiasCoverage 354,99 → 354,100 0.000258 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 409,100 → 409,100 0.000258 ΔRGB(9,8,7) antialiasing coverage residue on a shared outline AntialiasCoverage 409,101 → 409,101 0.000258 ΔRGB(7,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 353,103 → 353,103 0.000258 ΔRGB(-7,-6,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 353,105 → 353,105 0.000258 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 409,105 → 409,105 0.000258 ΔRGB(12,11,9) antialiasing coverage residue on a shared outline AntialiasCoverage 408,106 → 408,106 0.000258 ΔRGB(13,12,10) antialiasing coverage residue on a shared outline AntialiasCoverage 353,108 → 353,109 0.000258 ΔRGB(-7,-6,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 408,111 → 408,111 0.000258 ΔRGB(22,20,18) antialiasing coverage residue on a shared outline AntialiasCoverage 353,112 → 353,112 0.000258 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 408,112 → 408,112 0.000258 ΔRGB(9,8,7) antialiasing coverage residue on a shared outline AntialiasCoverage 353,116 → 353,116 0.000258 ΔRGB(-13,-12,-10) antialiasing coverage residue on a shared outline AntialiasCoverage 352,121 → 352,122 0.000258 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 352,125 → 352,125 0.000258 ΔRGB(-12,-10,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 407,129 → 407,130 0.000258 ΔRGB(-2,-2,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 406,130 → 406,131 0.000258 ΔRGB(26,22,19) antialiasing coverage residue on a shared outline AntialiasCoverage 355,84 → 355,84 0.000129 ΔRGB(-9,-8,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 355,85 → 355,85 0.000129 ΔRGB(-17,-16,-14) antialiasing coverage residue on a shared outline AntialiasCoverage 410,90 → 410,90 0.000129 ΔRGB(51,46,40) antialiasing coverage residue on a shared outline AntialiasCoverage 409,96 → 409,96 0.000129 ΔRGB(15,13,12) antialiasing coverage residue on a shared outline AntialiasCoverage 409,97 → 409,97 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 409,98 → 409,98 0.000129 ΔRGB(38,34,29) antialiasing coverage residue on a shared outline AntialiasCoverage 354,98 → 354,98 0.000129 ΔE 2.5 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 409,99 → 409,99 0.000129 ΔRGB(22,20,18) antialiasing coverage residue on a shared outline AntialiasCoverage 354,100 → 354,100 0.000129 ΔRGB(-21,-18,-16) antialiasing coverage residue on a shared outline AntialiasCoverage 354,102 → 354,102 0.000129 ΔRGB(-25,-23,-20) antialiasing coverage residue on a shared outline AntialiasCoverage 409,102 → 409,102 0.000129 ΔRGB(25,21,18) antialiasing coverage residue on a shared outline AntialiasCoverage 409,103 → 409,103 0.000129 ΔRGB(21,18,16) antialiasing coverage residue on a shared outline AntialiasCoverage 353,104 → 353,104 0.000129 ΔRGB(-16,-15,-13) antialiasing coverage residue on a shared outline AntialiasCoverage 409,104 → 409,104 0.000129 ΔRGB(17,16,14) antialiasing coverage residue on a shared outline AntialiasCoverage 353,106 → 353,106 0.000129 ΔRGB(-25,-21,-18) antialiasing coverage residue on a shared outline AntialiasCoverage 408,107 → 408,107 0.000129 ΔRGB(21,18,15) antialiasing coverage residue on a shared outline AntialiasCoverage 353,108 → 353,108 0.000129 ΔRGB(-16,-14,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 408,108 → 408,108 0.000129 ΔRGB(23,21,19) antialiasing coverage residue on a shared outline AntialiasCoverage 408,109 → 408,109 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 353,110 → 353,110 0.000129 ΔRGB(-21,-18,-15) antialiasing coverage residue on a shared outline AntialiasCoverage 408,110 → 408,110 0.000129 ΔRGB(25,23,20) antialiasing coverage residue on a shared outline AntialiasCoverage 353,111 → 353,111 0.000129 ΔRGB(-25,-23,-20) antialiasing coverage residue on a shared outline AntialiasCoverage 353,113 → 353,113 0.000129 ΔRGB(-23,-21,-19) antialiasing coverage residue on a shared outline AntialiasCoverage 408,113 → 408,113 0.000129 ΔE 1.4 ΔRGB(7,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 353,115 → 353,115 0.000129 ΔRGB(-22,-20,-18) antialiasing coverage residue on a shared outline AntialiasCoverage 352,117 → 352,117 0.000129 ΔRGB(-9,-8,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 352,118 → 352,118 0.000129 ΔRGB(-17,-16,-14) antialiasing coverage residue on a shared outline AntialiasCoverage 352,119 → 352,119 0.000129 ΔRGB(-21,-18,-15) antialiasing coverage residue on a shared outline AntialiasCoverage 192,120 → 192,120 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 352,120 → 352,120 0.000129 ΔRGB(-25,-22,-19) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-generated-content.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x generated-content interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-generated-content {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-generated-content"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.03% · raw 0.04% (362 px) interactions-cartesian-lists-counters-x-units-values · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 21.4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for lists-counters and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (10 total; showing 10 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 10 362 63,56 → 401,86 104 total 0.05% · largest 0.01%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 397,75 → 401,86 0.01 ΔRGB(30,30,27) antialiasing coverage residue on a shared outline AntialiasCoverage 393,75 → 393,86 0.009559 ΔRGB(-20,-19,-17) antialiasing coverage residue on a shared outline AntialiasCoverage 397,81 → 400,85 0.005167 ΔRGB(-29,-31,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 397,76 → 399,80 0.004650 ΔRGB(-28,-26,-24) antialiasing coverage residue on a shared outline AntialiasCoverage 394,81 → 395,85 0.003617 ΔRGB(71,66,60) antialiasing coverage residue on a shared outline AntialiasCoverage 394,76 → 395,80 0.003100 ΔRGB(68,64,59) antialiasing coverage residue on a shared outline AntialiasCoverage 236,56 → 236,58 0.001808 ΔRGB(-5,-69,-73) antialiasing coverage residue on a shared outline AntialiasCoverage 237,56 → 238,58 0.001808 ΔRGB(8,102,107) antialiasing coverage residue on a shared outline AntialiasCoverage 63,69 → 63,71 0.001808 ΔRGB(-5,-69,-73) antialiasing coverage residue on a shared outline AntialiasCoverage 65,69 → 65,71 0.001808 ΔRGB(8,102,107) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-lists-counters-x-units-values.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>lists-counters x units-values interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-lists-counters {counter-reset:pair-item;}
61 .f-units-values {width:calc(100% - 9px);padding-left:5%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-lists-counters f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-units-values"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.03% · raw 0.04% (357 px) interactions-cartesian-block-box-model-x-units-values · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 24.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for block-box-model and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 357 33,67 → 41,79 254 total 0.05% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 33,67 → 41,79 0.03 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 35,68 → 40,75 0.01 ΔRGB(-2,-2,-2) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-block-box-model-x-units-values.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>block-box-model x units-values interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-block-box-model {box-sizing:border-box;padding:11px 7px;min-width:92px;max-width:132px;}
61 .f-units-values {width:calc(100% - 9px);padding-left:5%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-block-box-model f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-block-box-model"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-units-values"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-block-box-model"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.03% · raw 0.03% (347 px) interactions-cartesian-lists-counters-x-tables · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 27.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for lists-counters and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (9 total; showing 9 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 9 347 236,56 → 402,90 84 total 0.04% · largest 0.01%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 377,78 → 382,90 0.01 ΔRGB(-86,-81,-73) antialiasing coverage residue on a shared outline AntialiasCoverage 383,78 → 388,90 0.01 ΔRGB(90,84,77) antialiasing coverage residue on a shared outline AntialiasCoverage 380,80 → 385,85 0.01 ΔRGB(4,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 385,87 → 386,90 0.002971 ΔRGB(-76,-71,-65) antialiasing coverage residue on a shared outline AntialiasCoverage 379,87 → 380,90 0.002713 ΔRGB(95,89,81) antialiasing coverage residue on a shared outline AntialiasCoverage 236,56 → 236,58 0.001808 ΔRGB(-5,-69,-73) antialiasing coverage residue on a shared outline AntialiasCoverage 237,56 → 238,58 0.001808 ΔRGB(8,102,107) antialiasing coverage residue on a shared outline AntialiasCoverage 400,88 → 400,90 0.001808 ΔRGB(-5,-69,-73) antialiasing coverage residue on a shared outline AntialiasCoverage 401,88 → 402,90 0.001808 ΔRGB(8,102,107) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-lists-counters-x-tables.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>lists-counters x tables interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-lists-counters {counter-reset:pair-item;}
61 .f-tables {display:table;border-collapse:separate;border-spacing:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-lists-counters f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-tables"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.03% (343 px) interactions-cartesian-block-box-model-x-color-opacity · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.4
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for block-box-model and color-opacity: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (71 total; showing 64 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 71 343 195,79 → 215,91 38 total 0.04% · largest 0.004909%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 209,85 → 212,89 0.004909 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 207,79 → 207,91 0.004650 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 209,80 → 212,84 0.003875 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 197,88 → 203,89 0.002971 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 198,86 → 202,86 0.001679 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 207,79 → 211,79 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 199,79 → 201,80 0.001292 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 212,79 → 214,80 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 200,81 → 200,82 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 215,81 → 215,83 0.000904 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 196,85 → 197,86 0.000904 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,90 → 214,91 0.000904 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 202,82 → 203,83 0.000775 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 205,89 → 205,90 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 202,84 → 202,85 0.000646 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,86 → 204,87 0.000646 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 198,80 → 199,81 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 198,82 → 198,83 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 201,82 → 201,83 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 203,84 → 203,84 0.000517 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 203,85 → 204,86 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 215,88 → 215,89 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 196,90 → 197,91 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 198,83 → 198,84 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 215,83 → 215,84 0.000388 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,83 → 213,84 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,85 → 215,85 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 215,86 → 215,87 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,87 → 214,87 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 204,88 → 204,88 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 213,88 → 214,88 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 215,89 → 215,89 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 195,90 → 195,90 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,79 → 212,79 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 201,80 → 201,80 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 202,80 → 202,81 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 212,81 → 213,81 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 202,81 → 202,81 0.000258 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 213,82 → 213,82 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 199,83 → 199,83 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 197,84 → 197,84 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 199,84 → 199,84 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 214,84 → 214,84 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 199,84 → 199,85 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 213,84 → 213,84 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 198,85 → 198,86 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 213,85 → 213,85 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 202,86 → 202,86 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 213,86 → 213,86 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 196,87 → 196,88 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 196,88 → 196,89 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 197,89 → 197,89 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 213,89 → 213,89 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 203,89 → 204,89 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 214,90 → 214,90 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 204,90 → 204,91 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 205,90 → 205,91 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 213,81 → 213,81 0.000129 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 201,82 → 201,82 0.000129 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 213,83 → 213,83 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 213,83 → 213,83 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 199,83 → 199,83 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 201,84 → 201,84 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 212,84 → 212,84 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-block-box-model-x-color-opacity.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>block-box-model x color-opacity interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-block-box-model {box-sizing:border-box;padding:11px 7px;min-width:92px;max-width:132px;}
61 .f-color-opacity {color:#5a189a;opacity:.76;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-block-box-model f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-block-box-model"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-block-box-model"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.03% (343 px) interactions-cartesian-color-opacity-x-generated-content · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.4
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for color-opacity and generated-content: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (71 total; showing 64 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 71 343 359,94 → 380,106 38 total 0.04% · largest 0.004909%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 373,100 → 377,104 0.004909 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,94 → 371,106 0.004650 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 373,95 → 376,99 0.003875 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,103 → 367,104 0.002971 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,101 → 366,101 0.001679 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 372,94 → 375,94 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,94 → 365,95 0.001292 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,94 → 379,95 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,96 → 364,97 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,96 → 379,98 0.000904 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,100 → 361,101 0.000904 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,105 → 378,106 0.000904 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,97 → 366,98 0.000775 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,104 → 369,105 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,99 → 366,100 0.000646 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,101 → 368,102 0.000646 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,95 → 363,96 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,97 → 362,98 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,97 → 365,98 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 367,99 → 367,100 0.000517 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,100 → 367,101 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 380,103 → 380,104 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,105 → 361,106 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,98 → 362,99 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,98 → 379,99 0.000388 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,98 → 377,99 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,100 → 379,100 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,101 → 380,102 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,102 → 378,102 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,103 → 368,103 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,103 → 378,103 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,104 → 379,104 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 359,105 → 359,105 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,94 → 376,94 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,95 → 365,95 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,95 → 365,96 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,96 → 377,96 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,96 → 366,96 0.000258 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,97 → 378,97 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,98 → 363,98 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 361,99 → 361,99 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,99 → 363,99 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,99 → 378,99 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,100 → 363,100 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,100 → 378,100 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,100 → 362,101 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,100 → 377,100 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 366,101 → 366,101 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,101 → 378,101 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,102 → 360,103 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,103 → 360,104 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,104 → 361,104 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,104 → 377,104 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,104 → 367,104 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,105 → 379,105 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,105 → 368,106 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,105 → 369,106 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,96 → 377,96 0.000129 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,97 → 364,97 0.000129 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,98 → 378,98 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,98 → 377,98 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,98 → 363,98 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 365,99 → 365,99 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 376,99 → 376,99 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-generated-content.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x generated-content interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-color-opacity {color:#5a189a;opacity:.76;}
61 .f-generated-content {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-color-opacity f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-generated-content"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.03% (343 px) interactions-cartesian-color-opacity-x-multicol · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.4
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for color-opacity and multicol: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (71 total; showing 64 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 71 343 416,53 → 437,65 38 total 0.04% · largest 0.004909%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 430,59 → 434,63 0.004909 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 428,53 → 428,65 0.004650 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 430,54 → 434,58 0.003875 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 419,62 → 425,63 0.002971 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 420,60 → 424,60 0.001679 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 429,53 → 432,53 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 420,53 → 422,54 0.001292 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 434,53 → 436,54 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 421,55 → 422,56 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 436,55 → 436,57 0.000904 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 418,59 → 419,60 0.000904 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 434,64 → 436,65 0.000904 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 424,56 → 424,57 0.000775 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 426,63 → 427,64 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 423,58 → 423,59 0.000646 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 425,60 → 426,61 0.000646 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 420,54 → 420,55 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 420,56 → 420,57 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 422,56 → 422,57 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 424,58 → 425,59 0.000517 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 425,59 → 425,60 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 437,62 → 437,63 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 418,64 → 418,65 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 419,57 → 419,58 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 436,57 → 436,58 0.000388 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 434,57 → 434,58 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 436,59 → 436,60 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 437,60 → 437,61 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 435,61 → 435,61 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 426,62 → 426,62 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 435,62 → 435,62 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 436,63 → 436,63 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 417,64 → 417,64 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 433,53 → 433,53 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 423,54 → 423,54 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 423,54 → 423,55 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 434,55 → 434,55 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 423,55 → 423,55 0.000258 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 435,56 → 435,56 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 421,57 → 421,57 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 419,58 → 419,58 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 420,58 → 420,58 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 436,58 → 436,58 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 420,59 → 420,59 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 435,59 → 435,59 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 420,60 → 420,60 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 434,60 → 435,60 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 423,60 → 424,60 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 435,60 → 435,60 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 418,61 → 418,62 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 417,62 → 417,63 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 419,63 → 419,63 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 434,63 → 435,63 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 425,63 → 425,63 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 436,64 → 436,64 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 425,64 → 425,65 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 427,64 → 427,65 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 435,55 → 435,55 0.000129 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 422,56 → 422,56 0.000129 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 435,57 → 435,57 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 435,57 → 435,57 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 420,57 → 420,57 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 423,58 → 423,58 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 433,58 → 433,58 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-multicol.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x multicol interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-color-opacity {color:#5a189a;opacity:.76;}
61 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-color-opacity f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.03% (343 px) interactions-cartesian-color-opacity-x-overflow-clipping · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.4
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for color-opacity and overflow-clipping: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (71 total; showing 64 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 71 343 359,94 → 380,106 38 total 0.04% · largest 0.004909%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 373,100 → 377,104 0.004909 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,94 → 371,106 0.004650 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 373,95 → 376,99 0.003875 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,103 → 367,104 0.002971 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,101 → 366,101 0.001679 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 372,94 → 375,94 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,94 → 365,95 0.001292 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,94 → 379,95 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,96 → 364,97 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,96 → 379,98 0.000904 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,100 → 361,101 0.000904 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,105 → 378,106 0.000904 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,97 → 366,98 0.000775 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,104 → 369,105 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,99 → 366,100 0.000646 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,101 → 368,102 0.000646 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,95 → 363,96 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,97 → 362,98 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,97 → 365,98 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 367,99 → 367,100 0.000517 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,100 → 367,101 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 380,103 → 380,104 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,105 → 361,106 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,98 → 362,99 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,98 → 379,99 0.000388 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,98 → 377,99 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,100 → 379,100 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,101 → 380,102 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,102 → 378,102 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,103 → 368,103 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,103 → 378,103 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,104 → 379,104 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 359,105 → 359,105 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,94 → 376,94 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,95 → 365,95 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,95 → 365,96 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,96 → 377,96 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,96 → 366,96 0.000258 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,97 → 378,97 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,98 → 363,98 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 361,99 → 361,99 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,99 → 363,99 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,99 → 378,99 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,100 → 363,100 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,100 → 378,100 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,100 → 362,101 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,100 → 377,100 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 366,101 → 366,101 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,101 → 378,101 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,102 → 360,103 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,103 → 360,104 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,104 → 361,104 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,104 → 377,104 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,104 → 367,104 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,105 → 379,105 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,105 → 368,106 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,105 → 369,106 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,96 → 377,96 0.000129 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,97 → 364,97 0.000129 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,98 → 378,98 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,98 → 377,98 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,98 → 363,98 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 365,99 → 365,99 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 376,99 → 376,99 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-overflow-clipping.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x overflow-clipping interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-color-opacity {color:#5a189a;opacity:.76;}
61 .f-overflow-clipping {overflow:hidden;max-height:58px;border-radius:9px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-color-opacity f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-overflow-clipping"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.03% (343 px) interactions-cartesian-color-opacity-x-positioning · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.4
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for color-opacity and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (71 total; showing 64 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 71 343 359,75 → 380,86 38 total 0.04% · largest 0.004909%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 373,81 → 377,85 0.004909 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,75 → 371,86 0.004650 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 373,76 → 376,80 0.003875 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,84 → 367,84 0.002971 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,82 → 366,82 0.001679 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 372,75 → 375,75 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,75 → 365,76 0.001292 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,75 → 379,76 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 364,78 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,77 → 379,78 0.000904 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,81 → 361,82 0.000904 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,86 → 378,86 0.000904 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,77 → 366,79 0.000775 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,84 → 369,86 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,80 → 366,81 0.000646 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,82 → 368,83 0.000646 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,76 → 363,77 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,78 → 362,78 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,78 → 365,79 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 367,80 → 367,80 0.000517 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,81 → 367,82 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 380,84 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,86 → 361,86 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,79 → 362,79 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,79 → 379,79 0.000388 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,79 → 377,79 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,81 → 379,81 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,82 → 380,83 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,83 → 378,83 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,84 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,84 → 378,84 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,85 → 379,85 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 359,85 → 359,86 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,75 → 376,75 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,76 → 365,76 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,76 → 365,76 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 377,76 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,77 → 366,77 0.000258 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,77 → 378,78 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,78 → 363,79 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 361,80 → 361,80 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,80 → 363,80 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,80 → 378,80 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,80 → 363,81 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,80 → 378,80 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,81 → 362,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,81 → 377,81 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 366,82 → 366,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,82 → 378,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,83 → 360,84 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 360,84 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,85 → 361,85 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,85 → 377,85 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,85 → 367,85 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,85 → 379,86 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,86 → 368,86 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,86 → 369,86 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,77 → 377,77 0.000129 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,78 → 364,78 0.000129 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,78 → 378,78 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,79 → 377,79 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,79 → 363,79 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 365,80 → 365,80 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 376,80 → 376,80 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-positioning.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x positioning interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-color-opacity {color:#5a189a;opacity:.76;}
61 .f-positioning {position:relative;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-color-opacity f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-positioning"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.03% (343 px) interactions-cartesian-color-opacity-x-selectors-cascade · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.4
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for color-opacity and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (71 total; showing 64 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 71 343 359,75 → 380,86 38 total 0.04% · largest 0.004909%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 373,81 → 377,85 0.004909 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,75 → 371,86 0.004650 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 373,76 → 376,80 0.003875 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,84 → 367,84 0.002971 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,82 → 366,82 0.001679 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 372,75 → 375,75 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,75 → 365,76 0.001292 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,75 → 379,76 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 364,78 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,77 → 379,78 0.000904 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,81 → 361,82 0.000904 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,86 → 378,86 0.000904 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,77 → 366,79 0.000775 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,84 → 369,86 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,80 → 366,81 0.000646 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,82 → 368,83 0.000646 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,76 → 363,77 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,78 → 362,78 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,78 → 365,79 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 367,80 → 367,80 0.000517 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,81 → 367,82 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 380,84 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,86 → 361,86 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,79 → 362,79 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 379,79 → 379,79 0.000388 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,79 → 377,79 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,81 → 379,81 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,82 → 380,83 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,83 → 378,83 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,84 → 368,84 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,84 → 378,84 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,85 → 379,85 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 359,85 → 359,86 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,75 → 376,75 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,76 → 365,76 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,76 → 365,76 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 377,76 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,77 → 366,77 0.000258 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,77 → 378,78 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,78 → 363,79 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 361,80 → 361,80 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,80 → 363,80 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 378,80 → 378,80 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,80 → 363,81 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,80 → 378,80 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,81 → 362,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,81 → 377,81 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 366,82 → 366,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,82 → 378,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,83 → 360,84 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 360,84 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,85 → 361,85 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,85 → 377,85 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,85 → 367,85 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,85 → 379,86 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,86 → 368,86 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,86 → 369,86 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,77 → 377,77 0.000129 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,78 → 364,78 0.000129 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,78 → 378,78 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,79 → 377,79 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,79 → 363,79 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 365,80 → 365,80 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 376,80 → 376,80 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-selectors-cascade.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x selectors-cascade interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-color-opacity {color:#5a189a;opacity:.76;}
61 .f-selectors-cascade {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-color-opacity f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-selectors-cascade"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.03% (343 px) interactions-cartesian-color-opacity-x-units-values · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.4
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for color-opacity and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (71 total; showing 64 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 71 343 350,75 → 371,86 38 total 0.04% · largest 0.004909%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 364,81 → 368,85 0.004909 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,75 → 362,86 0.004650 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 367,80 0.003875 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 353,84 → 358,84 0.002971 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 354,82 → 357,82 0.001679 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,75 → 366,75 0.001550 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 354,75 → 356,76 0.001292 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,75 → 370,76 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 355,76 → 356,78 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,77 → 370,78 0.000904 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 352,81 → 352,82 0.000904 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,86 → 369,86 0.000904 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 357,77 → 358,79 0.000775 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 360,86 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 357,80 → 357,81 0.000646 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 359,82 → 359,83 0.000646 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 354,76 → 354,77 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 353,78 → 354,78 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 356,78 → 356,79 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 358,80 → 358,80 0.000517 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 358,81 → 359,82 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 371,84 → 371,84 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 352,86 → 352,86 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 353,79 → 353,79 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 370,79 → 370,79 0.000388 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,79 → 368,79 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,81 → 370,81 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,82 → 371,83 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 369,83 → 369,83 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,84 → 360,84 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,84 → 369,84 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,85 → 370,85 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 350,85 → 350,86 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,75 → 367,75 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 356,76 → 356,76 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 357,76 → 357,76 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,76 → 368,76 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 357,77 → 357,77 0.000258 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,77 → 369,78 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 355,78 → 355,79 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 353,80 → 353,80 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 354,80 → 354,80 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 369,80 → 369,80 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 354,80 → 354,81 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,80 → 369,80 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 354,81 → 354,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,81 → 368,81 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 357,82 → 357,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 369,82 → 369,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 351,83 → 351,84 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 351,84 → 351,84 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 352,85 → 352,85 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,85 → 368,85 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 358,85 → 359,85 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,85 → 370,86 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 359,86 → 359,86 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,86 → 361,86 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,77 → 368,77 0.000129 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 356,78 → 356,78 0.000129 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 369,78 → 369,78 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,79 → 368,79 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 354,79 → 354,79 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 356,80 → 356,80 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 367,80 → 367,80 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-units-values.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x units-values interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-color-opacity {color:#5a189a;opacity:.76;}
61 .f-units-values {width:calc(100% - 9px);padding-left:5%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-color-opacity f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-units-values"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.03% · raw 0.03% (334 px) interactions-cartesian-flexbox-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 25.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for flexbox and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (5 total; showing 5 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 5 334 240,67 → 413,86 240 total 0.04% · largest 0.03%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 247,67 → 258,79 0.03 ΔRGB(6,6,5) antialiasing coverage residue on a shared outline AntialiasCoverage 250,69 → 255,75 0.01 ΔRGB(-11,-10,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 240,76 → 240,76 0.000129 ΔRGB(9,8,7) antialiasing coverage residue on a shared outline AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 413,86 → 413,86 0.000129 ΔRGB(13,11,9) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-flexbox-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>flexbox x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-flexbox {display:flex;align-items:center;justify-content:space-around;gap:4px;}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-flexbox f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-flexbox"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.03% · raw 0.03% (334 px) interactions-cartesian-lists-counters-x-lists-counters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 20.2
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for lists-counters and lists-counters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (8 total; showing 8 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 8 334 236,56 → 246,86 104 total 0.04% · largest 0.01%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 242,75 → 246,86 0.01 ΔRGB(24,25,25) antialiasing coverage residue on a shared outline AntialiasCoverage 237,75 → 238,86 0.009559 ΔRGB(-20,-19,-17) antialiasing coverage residue on a shared outline AntialiasCoverage 242,81 → 244,85 0.005167 ΔRGB(-29,-31,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 242,76 → 244,80 0.004650 ΔRGB(-28,-26,-24) antialiasing coverage residue on a shared outline AntialiasCoverage 239,81 → 239,85 0.003617 ΔRGB(71,66,60) antialiasing coverage residue on a shared outline AntialiasCoverage 239,76 → 239,80 0.003100 ΔRGB(68,64,59) antialiasing coverage residue on a shared outline AntialiasCoverage 236,56 → 236,58 0.001808 ΔRGB(-5,-69,-73) antialiasing coverage residue on a shared outline AntialiasCoverage 237,56 → 238,58 0.001808 ΔRGB(8,102,107) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-lists-counters-x-lists-counters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>lists-counters x lists-counters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-lists-counters {counter-reset:pair-item;}
61 </style>
62 </head>
63 <body>
64 <div class="stage"><div class="node f-lists-counters f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
65 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
66 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 </body>
68 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.03% · raw 0.03% (333 px) interactions-cartesian-generated-content-x-multicol · same-element-and-bidirectional-nestingPASS via CSS-scale observation: balanced edge coverage ColorValue ΔE 33.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill recolour ΔRGB(+3,+2,+2) (ΔE 33.7)
Cartesian family interaction for generated-content and multicol: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 333 82,63 → 218,91 327 total 0.04% · largest 0.04% · max ΔE 33.7
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 82,63 → 86,74 0.04 ΔE 33.7 ΔRGB(-3,-2,-2) fill recolour ΔRGB(-3,-2,-2) (ΔE 33.7) AntialiasCoverage 216,91 → 218,91 0.000775 ΔRGB(144,128,111) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-generated-content-x-multicol.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>generated-content x multicol interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-generated-content {}
61 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-generated-content f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-generated-content"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000197% · raw 0.03% (323 px) interactions-cartesian-color-opacity-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 0.4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for color-opacity and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (103 total; showing 64 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 103 323 347,74 → 413,86 14 total 0.04% · largest 0.001808%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 369,83 → 371,85 0.001808 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,81 → 364,83 0.001679 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 369,78 → 370,80 0.001292 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,85 → 380,85 0.001292 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 369,76 → 369,78 0.001163 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,76 → 381,76 0.001163 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,75 → 378,75 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,75 → 370,77 0.001033 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,80 → 372,82 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,76 → 368,77 0.000775 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 366,79 → 367,80 0.000775 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 382,79 → 383,80 0.000775 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,84 → 364,85 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,86 → 381,86 0.000775 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,86 → 380,86 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 369,74 → 370,75 0.000646 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 378,76 0.000646 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 382,76 → 383,77 0.000646 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 371,78 → 371,79 0.000646 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,78 → 375,80 0.000646 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,82 → 366,82 0.000646 antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 381,85 0.000646 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,84 → 363,85 0.000646 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,77 → 375,78 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 381,77 → 381,78 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,78 → 366,78 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 380,79 → 381,80 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,80 → 365,80 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,81 → 367,81 0.000517 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 382,81 → 383,82 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 381,82 → 381,83 0.000517 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 382,85 → 383,85 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 372,85 → 373,86 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 371,85 → 372,86 0.000517 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,86 → 377,86 0.000517 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,74 → 369,74 0.000388 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,75 → 380,75 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,78 → 377,79 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 381,78 → 381,79 0.000388 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,79 → 365,79 0.000388 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,81 → 377,81 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,81 → 380,81 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,81 → 375,82 0.000388 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 375,82 → 375,83 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 372,83 → 372,84 0.000388 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 375,84 → 375,85 0.000388 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,84 → 376,85 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,85 → 364,85 0.000388 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 381,75 → 381,75 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,76 → 367,76 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,76 → 377,77 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,77 → 366,77 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 377,78 → 377,78 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 383,78 → 383,78 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,78 → 367,78 0.000258 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 383,79 → 383,79 0.000258 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 377,79 → 377,79 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 366,81 → 366,81 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 381,82 → 381,82 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,82 → 376,82 0.000258 ΔRGB(0,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,83 → 368,83 0.000258 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 365,83 → 365,83 0.000258 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 382,86 → 382,86 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 375,86 → 375,86 0.000258 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-color-opacity {color:#5a189a;opacity:.76;}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-color-opacity f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.03% · raw 0.03% (322 px) interactions-cartesian-backgrounds-borders-x-positioning · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 26.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (8 total; showing 8 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 8 322 17,57 → 362,110 133 total 0.04% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 126,93 → 133,105 0.02 ΔRGB(-37,-36,-34) antialiasing coverage residue on a shared outline AntialiasCoverage 126,97 → 132,104 0.01 ΔRGB(3,3,3) antialiasing coverage residue on a shared outline AntialiasCoverage 125,93 → 125,105 0.009817 ΔRGB(106,101,96) antialiasing coverage residue on a shared outline AntialiasCoverage 17,57 → 17,57 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,68 → 362,68 0.000129 ΔRGB(6,7,5) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,110 → 362,110 0.000129 ΔRGB(15,14,12) antialiasing coverage residue on a shared outline AntialiasCoverage 361,110 → 361,110 0.000129 ΔRGB(-9,-8,-8) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-positioning.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x positioning interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-positioning {position:relative;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-positioning"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.03% · raw 0.03% (308 px) interactions-cartesian-clip-mask-x-lists-counters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 0.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and lists-counters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (8 total; showing 8 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 8 308 192,75 → 246,122 104 total 0.04% · largest 0.01% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 242,75 → 246,86 0.01 ΔRGB(24,25,25) antialiasing coverage residue on a shared outline AntialiasCoverage 237,75 → 238,86 0.009559 ΔRGB(-20,-19,-17) antialiasing coverage residue on a shared outline AntialiasCoverage 242,81 → 244,85 0.005167 ΔRGB(-29,-31,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 242,76 → 244,80 0.004650 ΔRGB(-28,-26,-24) antialiasing coverage residue on a shared outline AntialiasCoverage 239,81 → 239,85 0.003617 ΔRGB(71,66,60) antialiasing coverage residue on a shared outline AntialiasCoverage 239,76 → 239,80 0.003100 ΔRGB(68,64,59) antialiasing coverage residue on a shared outline AntialiasCoverage 192,120 → 192,120 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 218,122 → 218,122 0.000129 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-lists-counters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x lists-counters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-lists-counters {counter-reset:pair-item;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.03% · raw 0.03% (306 px) interactions-cartesian-block-box-model-x-lists-counters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 19.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for block-box-model and lists-counters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (6 total; showing 6 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 6 306 237,79 → 246,91 104 total 0.04% · largest 0.01%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 242,79 → 246,91 0.01 ΔRGB(24,25,25) antialiasing coverage residue on a shared outline AntialiasCoverage 237,79 → 238,91 0.009559 ΔRGB(-20,-19,-17) antialiasing coverage residue on a shared outline AntialiasCoverage 242,85 → 244,89 0.005167 ΔRGB(-29,-31,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 242,80 → 244,84 0.004650 ΔRGB(-28,-26,-24) antialiasing coverage residue on a shared outline AntialiasCoverage 239,85 → 239,89 0.003617 ΔRGB(71,66,60) antialiasing coverage residue on a shared outline AntialiasCoverage 239,80 → 239,84 0.003100 ΔRGB(68,64,59) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-block-box-model-x-lists-counters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>block-box-model x lists-counters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-block-box-model {box-sizing:border-box;padding:11px 7px;min-width:92px;max-width:132px;}
61 .f-lists-counters {counter-reset:pair-item;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-block-box-model f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-block-box-model"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-block-box-model"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.03% · raw 0.03% (306 px) interactions-cartesian-flexbox-x-positioning · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 26.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for flexbox and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (6 total; showing 6 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 6 306 279,84 → 288,95 104 total 0.04% · largest 0.01%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 283,84 → 288,95 0.01 ΔRGB(-59,-55,-50) antialiasing coverage residue on a shared outline AntialiasCoverage 279,84 → 279,95 0.009559 ΔRGB(86,81,74) antialiasing coverage residue on a shared outline AntialiasCoverage 284,90 → 286,94 0.005167 ΔRGB(71,67,61) antialiasing coverage residue on a shared outline AntialiasCoverage 283,85 → 286,89 0.004650 ΔRGB(40,38,35) antialiasing coverage residue on a shared outline AntialiasCoverage 281,90 → 281,94 0.003617 ΔRGB(-31,-29,-27) antialiasing coverage residue on a shared outline AntialiasCoverage 281,85 → 281,89 0.003100 ΔRGB(-31,-29,-27) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-flexbox-x-positioning.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>flexbox x positioning interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-flexbox {display:flex;align-items:center;justify-content:space-around;gap:4px;}
61 .f-positioning {position:relative;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-flexbox f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-positioning"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-flexbox"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.03% · raw 0.03% (306 px) interactions-cartesian-generated-content-x-lists-counters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 19.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for generated-content and lists-counters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (6 total; showing 6 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 6 306 237,94 → 246,106 104 total 0.04% · largest 0.01%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 242,94 → 246,106 0.01 ΔRGB(24,25,25) antialiasing coverage residue on a shared outline AntialiasCoverage 237,94 → 238,106 0.009559 ΔRGB(-20,-19,-17) antialiasing coverage residue on a shared outline AntialiasCoverage 242,100 → 244,104 0.005167 ΔRGB(-29,-31,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 242,95 → 244,99 0.004650 ΔRGB(-28,-26,-24) antialiasing coverage residue on a shared outline AntialiasCoverage 239,100 → 239,104 0.003617 ΔRGB(71,66,60) antialiasing coverage residue on a shared outline AntialiasCoverage 239,95 → 239,99 0.003100 ΔRGB(68,64,59) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-generated-content-x-lists-counters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>generated-content x lists-counters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-generated-content {}
61 .f-lists-counters {counter-reset:pair-item;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-generated-content f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-generated-content"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.03% · raw 0.03% (304 px) interactions-cartesian-images-replaced-x-images-replaced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 70.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for images-replaced and images-replaced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (4 total; showing 4 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 4 304 80,43 → 408,96 76 total 0.04% · largest 0.009817%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 244,43 → 244,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 408,43 → 408,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 80,57 → 80,81 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 231,72 → 231,96 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-images-replaced-x-images-replaced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>images-replaced x images-replaced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-images-replaced {}
61 </style>
62 </head>
63 <body>
64 <div class="stage"><div class="node f-images-replaced f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
65 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
66 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 </body>
68 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.03% · raw 0.03% (304 px) interactions-cartesian-images-replaced-x-multicol · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 70.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for images-replaced and multicol: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3 total; showing 3 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 3 304 80,43 → 452,81 152 total 0.04% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 452,50 → 452,74 0.02 ΔRGB(190,110,30) antialiasing coverage residue on a shared outline AntialiasCoverage 244,43 → 244,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 80,57 → 80,81 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-images-replaced-x-multicol.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>images-replaced x multicol interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-images-replaced {}
61 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-images-replaced f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.03% (282 px) interactions-cartesian-color-opacity-x-typography · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.4
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for color-opacity and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (94 total; showing 64 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 94 282 358,76 → 383,89 43 total 0.04% · largest 0.005555%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 373,76 → 373,89 0.005555 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,86 → 367,86 0.002454 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,83 → 366,84 0.001808 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 376,83 → 378,83 0.001163 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 383,84 → 383,86 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,87 → 378,87 0.001033 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 376,77 → 378,77 0.000904 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,78 → 365,79 0.000775 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,78 → 380,78 0.000646 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 380,86 0.000646 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,89 → 380,89 0.000646 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,76 → 380,76 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 381,82 → 381,82 0.000517 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,76 → 381,76 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 366,76 → 366,77 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 381,76 → 381,76 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,77 → 363,78 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,79 → 367,79 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 382,79 → 382,79 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,79 → 362,80 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,80 → 364,80 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,80 → 368,81 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,81 → 379,81 0.000388 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 366,81 → 366,82 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 361,82 → 361,82 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 363,82 → 363,83 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 369,83 → 369,84 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 360,83 → 360,84 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,85 → 370,86 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 359,86 → 359,86 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 380,86 → 380,86 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,87 → 368,88 0.000388 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 371,87 → 371,88 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 368,88 → 368,89 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 358,88 → 358,89 0.000388 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 366,76 → 366,76 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,77 → 363,77 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 378,77 → 379,77 0.000258 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 382,78 → 382,78 0.000258 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 367,78 → 367,78 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,79 → 380,79 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 382,80 → 382,80 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 361,81 → 361,81 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 366,82 → 366,82 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 369,82 → 369,83 0.000258 ΔRGB(1,0,1) antialiasing coverage residue on a shared outline AntialiasCoverage 382,83 → 382,83 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,83 → 379,83 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,83 → 380,83 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 380,84 → 380,84 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 370,85 → 370,85 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 362,87 → 362,87 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,87 → 380,87 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 383,87 → 383,87 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 379,87 → 379,87 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 359,88 → 359,88 0.000258 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 364,76 → 364,76 0.000129 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 363,76 → 363,76 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 382,77 → 382,77 0.000129 ΔRGB(1,1,1) antialiasing coverage residue on a shared outline AntialiasCoverage 367,77 → 367,77 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 382,77 → 382,77 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,78 → 362,78 0.000129 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 365,80 → 365,80 0.000129 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 368,80 → 368,80 0.000129 ΔRGB(0,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 362,80 → 362,80 0.000129 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-color-opacity-x-typography.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>color-opacity x typography interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-color-opacity {color:#5a189a;opacity:.76;}
61 .f-typography {font-size:18px;font-weight:700;letter-spacing:.7px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-color-opacity f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-color-opacity"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-typography"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-color-opacity"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.02% · raw 0.02% (230 px) interactions-cartesian-clip-mask-x-images-replaced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 0.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and images-replaced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (5 total; showing 5 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 5 230 80,43 → 408,122 76 total 0.03% · largest 0.009817% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 408,43 → 408,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 80,57 → 80,81 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 231,72 → 231,96 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 192,120 → 192,120 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 218,122 → 218,122 0.000129 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-images-replaced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x images-replaced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-images-replaced {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.02% · raw 0.02% (228 px) interactions-cartesian-block-box-model-x-images-replaced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 70.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for block-box-model and images-replaced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3 total; showing 3 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 3 228 80,43 → 408,100 76 total 0.03% · largest 0.009817%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 408,43 → 408,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 80,61 → 80,85 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 231,76 → 231,100 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-block-box-model-x-images-replaced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>block-box-model x images-replaced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-block-box-model {box-sizing:border-box;padding:11px 7px;min-width:92px;max-width:132px;}
61 .f-images-replaced {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-block-box-model f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-block-box-model"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-block-box-model"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.02% · raw 0.02% (228 px) interactions-cartesian-flexbox-x-images-replaced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 70.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for flexbox and images-replaced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3 total; showing 3 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 3 228 96,43 → 408,95 76 total 0.03% · largest 0.009817%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 408,43 → 408,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 280,65 → 280,89 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 96,71 → 96,95 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-flexbox-x-images-replaced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>flexbox x images-replaced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-flexbox {display:flex;align-items:center;justify-content:space-around;gap:4px;}
61 .f-images-replaced {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-flexbox f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-flexbox"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.02% · raw 0.02% (228 px) interactions-cartesian-generated-content-x-images-replaced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 70.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for generated-content and images-replaced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3 total; showing 3 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 3 228 80,43 → 408,115 76 total 0.03% · largest 0.009817%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 408,43 → 408,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 80,76 → 80,100 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 231,91 → 231,115 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-generated-content-x-images-replaced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>generated-content x images-replaced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-generated-content {}
61 .f-images-replaced {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-generated-content f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-generated-content"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.02% · raw 0.02% (228 px) interactions-cartesian-images-replaced-x-units-values · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 70.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for images-replaced and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 228 71,43 → 244,81 152 total 0.03% · largest 0.02%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 71,57 → 71,81 0.02 ΔRGB(190,110,30) antialiasing coverage residue on a shared outline AntialiasCoverage 244,43 → 244,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-images-replaced-x-units-values.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>images-replaced x units-values interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-images-replaced {}
61 .f-units-values {width:calc(100% - 9px);padding-left:5%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-images-replaced f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-units-values"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.02% · raw 0.02% (214 px) interactions-cartesian-clip-mask-x-flexbox · same-element-and-bidirectional-nestingPASS via CSS-scale observation: predominant shared-outline coverage ColorValue ΔE 3.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw fill recolour ΔRGB(-4,-3,-3) (ΔE 3.5)
Cartesian family interaction for clip-mask and flexbox: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (57 total; showing 57 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 57 214 192,58 → 459,122 15 total 0.03% · largest 0.001938% · max ΔE 3.9
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason ColorValue 403,73 → 403,77 0.001938 ΔE 3.9 ΔRGB(-25,-21,-19) fill recolour ΔRGB(-25,-21,-19) (ΔE 3.9) AntialiasCoverage 402,82 → 402,86 0.001938 ΔRGB(-25,-23,-20) antialiasing coverage residue on a shared outline AntialiasCoverage 401,91 → 401,96 0.001938 ΔRGB(-25,-23,-20) antialiasing coverage residue on a shared outline AntialiasCoverage 402,77 → 402,82 0.001808 ΔRGB(-21,-18,-15) antialiasing coverage residue on a shared outline AntialiasCoverage 401,96 → 401,100 0.001808 ΔRGB(-22,-20,-18) antialiasing coverage residue on a shared outline AntialiasCoverage 459,64 → 459,68 0.001679 ΔRGB(32,29,26) antialiasing coverage residue on a shared outline AntialiasCoverage 458,72 → 458,76 0.001679 ΔRGB(24,21,18) antialiasing coverage residue on a shared outline AntialiasCoverage 458,76 → 458,80 0.001679 ΔRGB(32,29,26) antialiasing coverage residue on a shared outline ColorValue 457,84 → 457,88 0.001679 ΔE 3.9 ΔRGB(21,18,15) fill recolour ΔRGB(+21,+18,+15) (ΔE 3.9) AntialiasCoverage 458,68 → 458,72 0.001550 ΔRGB(31,27,24) antialiasing coverage residue on a shared outline AntialiasCoverage 457,81 → 457,84 0.001550 ΔRGB(32,29,25) antialiasing coverage residue on a shared outline AntialiasCoverage 402,88 → 402,91 0.001292 ΔRGB(-32,-29,-26) antialiasing coverage residue on a shared outline AntialiasCoverage 404,59 → 404,60 0.000517 ΔRGB(-16,-14,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 402,87 → 402,87 0.000388 ΔRGB(-19,-17,-14) antialiasing coverage residue on a shared outline AntialiasCoverage 456,104 → 456,105 0.000388 ΔRGB(19,17,14) antialiasing coverage residue on a shared outline AntialiasCoverage 455,105 → 455,106 0.000388 ΔRGB(38,34,29) antialiasing coverage residue on a shared outline AntialiasCoverage 404,58 → 404,58 0.000258 ΔRGB(-34,-30,-27) antialiasing coverage residue on a shared outline AntialiasCoverage 406,58 → 406,58 0.000129 ΔRGB(8,8,7) antialiasing coverage residue on a shared outline AntialiasCoverage 407,58 → 407,58 0.000129 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 410,58 → 410,58 0.000129 ΔRGB(11,9,7) antialiasing coverage residue on a shared outline AntialiasCoverage 411,58 → 411,58 0.000129 ΔRGB(9,8,7) antialiasing coverage residue on a shared outline AntialiasCoverage 413,59 → 413,59 0.000129 ΔRGB(12,10,9) antialiasing coverage residue on a shared outline AntialiasCoverage 414,59 → 414,59 0.000129 ΔRGB(10,9,9) antialiasing coverage residue on a shared outline AntialiasCoverage 415,59 → 415,59 0.000129 ΔRGB(8,7,6) antialiasing coverage residue on a shared outline AntialiasCoverage 416,59 → 416,59 0.000129 ΔRGB(7,6,4) antialiasing coverage residue on a shared outline AntialiasCoverage 418,59 → 418,59 0.000129 ΔRGB(13,11,9) antialiasing coverage residue on a shared outline AntialiasCoverage 419,59 → 419,59 0.000129 ΔRGB(10,9,8) antialiasing coverage residue on a shared outline AntialiasCoverage 420,59 → 420,59 0.000129 ΔRGB(8,8,7) antialiasing coverage residue on a shared outline AntialiasCoverage 421,59 → 421,59 0.000129 ΔRGB(3,3,2) antialiasing coverage residue on a shared outline AntialiasCoverage 422,59 → 422,59 0.000129 ΔRGB(13,12,10) antialiasing coverage residue on a shared outline AntialiasCoverage 423,59 → 423,59 0.000129 ΔRGB(11,9,7) antialiasing coverage residue on a shared outline AntialiasCoverage 426,59 → 426,59 0.000129 ΔRGB(5,5,5) antialiasing coverage residue on a shared outline AntialiasCoverage 427,60 → 427,60 0.000129 ΔRGB(12,10,9) antialiasing coverage residue on a shared outline AntialiasCoverage 429,60 → 429,60 0.000129 ΔRGB(8,7,6) antialiasing coverage residue on a shared outline AntialiasCoverage 430,60 → 430,60 0.000129 ΔE 1.6 ΔRGB(7,6,4) antialiasing coverage residue on a shared outline AntialiasCoverage 402,100 → 402,100 0.000129 ΔRGB(-10,-9,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 402,100 → 402,100 0.000129 ΔRGB(-12,-10,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 436,104 → 436,104 0.000129 ΔE 1.1 ΔRGB(-5,-5,-5) antialiasing coverage residue on a shared outline AntialiasCoverage 437,104 → 437,104 0.000129 ΔRGB(-8,-7,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 438,104 → 438,104 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 439,104 → 439,104 0.000129 ΔRGB(-12,-11,-10) antialiasing coverage residue on a shared outline AntialiasCoverage 439,104 → 439,104 0.000129 ΔRGB(-3,-3,-2) antialiasing coverage residue on a shared outline AntialiasCoverage 440,104 → 440,104 0.000129 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 442,104 → 442,104 0.000129 ΔRGB(-12,-10,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 443,105 → 443,105 0.000129 ΔRGB(-8,-7,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 445,105 → 445,105 0.000129 ΔRGB(-12,-11,-10) antialiasing coverage residue on a shared outline AntialiasCoverage 445,105 → 445,105 0.000129 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 446,105 → 446,105 0.000129 ΔRGB(-9,-8,-7) antialiasing coverage residue on a shared outline AntialiasCoverage 447,105 → 447,105 0.000129 ΔRGB(-10,-9,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 448,105 → 448,105 0.000129 ΔRGB(-12,-10,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 449,105 → 449,105 0.000129 ΔRGB(-7,-6,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 449,105 → 449,105 0.000129 ΔRGB(-8,-7,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 450,105 → 450,105 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 452,106 → 452,106 0.000129 ΔRGB(-4,-3,-3) antialiasing coverage residue on a shared outline AntialiasCoverage 453,106 → 453,106 0.000129 ΔRGB(-10,-9,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 192,120 → 192,120 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 218,122 → 218,122 0.000129 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-flexbox.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x flexbox interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-flexbox {display:flex;align-items:center;justify-content:space-around;gap:4px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-flexbox"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.02% · raw 0.02% (191 px) interactions-cartesian-images-replaced-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 63.2
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for images-replaced and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (25 total; showing 25 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 25 191 83,43 → 417,95 76 total 0.02% · largest 0.009817%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 244,43 → 244,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 85,60 → 85,63 0.001033 ΔRGB(170,-110,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 84,68 → 84,70 0.001033 ΔRGB(170,-110,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 84,71 → 84,74 0.001033 ΔRGB(-190,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 84,75 → 84,77 0.001033 ΔRGB(-190,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 83,79 → 83,81 0.001033 ΔRGB(-190,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 84,64 → 84,66 0.000904 ΔRGB(170,-110,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 386,84 → 387,84 0.000646 ΔRGB(170,-40,-170) antialiasing coverage residue on a shared outline AntialiasCoverage 390,84 → 391,84 0.000646 ΔRGB(170,-40,-170) antialiasing coverage residue on a shared outline AntialiasCoverage 393,85 → 395,85 0.000646 ΔRGB(170,-40,-170) antialiasing coverage residue on a shared outline AntialiasCoverage 397,85 → 398,85 0.000646 ΔRGB(170,-40,-170) antialiasing coverage residue on a shared outline AntialiasCoverage 401,85 → 402,85 0.000646 ΔRGB(-190,-30,40) antialiasing coverage residue on a shared outline AntialiasCoverage 408,86 → 409,86 0.000646 ΔRGB(-190,-30,40) antialiasing coverage residue on a shared outline AntialiasCoverage 412,86 → 413,86 0.000646 ΔRGB(-190,-30,40) antialiasing coverage residue on a shared outline AntialiasCoverage 415,87 → 417,87 0.000646 ΔRGB(-190,-30,40) antialiasing coverage residue on a shared outline AntialiasCoverage 404,86 → 405,86 0.000517 ΔRGB(-190,-30,40) antialiasing coverage residue on a shared outline AntialiasCoverage 398,90 → 398,91 0.000517 ΔRGB(-190,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 399,76 → 399,76 0.000388 ΔRGB(170,-110,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 399,79 → 399,80 0.000388 ΔRGB(170,-110,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 83,83 → 83,83 0.000388 ΔRGB(-190,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 398,83 → 398,84 0.000388 ΔRGB(170,-110,-30) antialiasing coverage residue on a shared outline AntialiasCoverage 398,87 → 398,87 0.000388 ΔRGB(-190,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 397,94 → 397,95 0.000388 ΔRGB(-190,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 89,72 → 89,72 0.000129 ΔRGB(-190,-30,40) antialiasing coverage residue on a shared outline AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-images-replaced-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>images-replaced x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-images-replaced {}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-images-replaced f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.02% · raw 0.02% (172 px) interactions-cartesian-flexbox-x-lists-counters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 24.9
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for flexbox and lists-counters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (4 total; showing 4 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 4 172 43,74 → 50,85 86 total 0.02% · largest 0.01%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 43,74 → 46,84 0.01 ΔRGB(4,53,56) antialiasing coverage residue on a shared outline AntialiasCoverage 47,74 → 48,84 0.008526 ΔRGB(-3,-29,-31) antialiasing coverage residue on a shared outline AntialiasCoverage 43,84 → 44,85 0.001292 ΔRGB(3,41,43) antialiasing coverage residue on a shared outline AntialiasCoverage 50,84 → 50,85 0.001292 ΔRGB(-4,-42,-44) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-flexbox-x-lists-counters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>flexbox x lists-counters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-flexbox {display:flex;align-items:center;justify-content:space-around;gap:4px;}
61 .f-lists-counters {counter-reset:pair-item;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-flexbox f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-flexbox"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.02% · raw 0.02% (157 px) interactions-cartesian-backgrounds-borders-x-images-replaced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 68.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and images-replaced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (7 total; showing 7 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 7 157 17,43 → 408,110 76 total 0.02% · largest 0.009817%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 408,43 → 408,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 232,73 → 232,97 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 17,57 → 17,57 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,68 → 362,68 0.000129 ΔRGB(6,7,5) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,110 → 362,110 0.000129 ΔRGB(15,14,12) antialiasing coverage residue on a shared outline AntialiasCoverage 361,110 → 361,110 0.000129 ΔRGB(-9,-8,-8) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-images-replaced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x images-replaced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-images-replaced {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.01% · raw 0.01% (152 px) interactions-cartesian-grid-x-images-replaced · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 70.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for grid and images-replaced: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 152 80,43 → 408,95 76 total 0.02% · largest 0.009817%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 408,43 → 408,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 80,71 → 80,95 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-grid-x-images-replaced.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>grid x images-replaced interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-grid {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px;}
61 .f-images-replaced {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-grid f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-grid"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.01% · raw 0.01% (152 px) interactions-cartesian-images-replaced-x-overflow-clipping · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 70.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for images-replaced and overflow-clipping: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 152 80,43 → 244,86 76 total 0.02% · largest 0.009817%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 244,43 → 244,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 80,62 → 80,86 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-images-replaced-x-overflow-clipping.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>images-replaced x overflow-clipping interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-images-replaced {}
61 .f-overflow-clipping {overflow:hidden;max-height:58px;border-radius:9px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-images-replaced f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-overflow-clipping"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.01% · raw 0.01% (152 px) interactions-cartesian-images-replaced-x-selectors-cascade · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 70.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for images-replaced and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 152 80,43 → 244,81 76 total 0.02% · largest 0.009817%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 244,43 → 244,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 80,57 → 80,81 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-images-replaced-x-selectors-cascade.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>images-replaced x selectors-cascade interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-images-replaced {}
61 .f-selectors-cascade {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-images-replaced f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-selectors-cascade"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.01% · raw 0.01% (152 px) interactions-cartesian-images-replaced-x-tables · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 70.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for images-replaced and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 152 244,43 → 398,99 76 total 0.02% · largest 0.009817%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 244,43 → 244,67 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline AntialiasCoverage 398,75 → 398,99 0.009817 ΔRGB(170,-100,180) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-images-replaced-x-tables.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>images-replaced x tables interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-images-replaced {}
61 .f-tables {display:table;border-collapse:separate;border-spacing:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-images-replaced f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-tables"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.01% · raw 0.01% (106 px) interactions-cartesian-flexbox-x-multicol · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 37.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for flexbox and multicol: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 106 267,65 → 267,99 106 total 0.01% · largest 0.01%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 267,65 → 267,99 0.01 ΔRGB(-144,-128,-111) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-flexbox-x-multicol.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>flexbox x multicol interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-flexbox {display:flex;align-items:center;justify-content:space-around;gap:4px;}
61 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-flexbox f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-flexbox"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.006794% · raw 0.006794% (69 px) interactions-cartesian-images-replaced-x-positioning · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 70.2
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for images-replaced and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 69 244,43 → 244,65 69 total 0.008913% · largest 0.008913%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 244,43 → 244,65 0.008913 ΔRGB(170,-110,-30) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-images-replaced-x-positioning.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>images-replaced x positioning interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-images-replaced {}
61 .f-positioning {position:relative;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-images-replaced f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-images-replaced"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-positioning"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-images-replaced"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.002855% · raw 0.002855% (29 px) interactions-cartesian-lists-counters-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 25.3
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for lists-counters and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3 total; showing 3 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 3 29 236,56 → 347,79 14 total 0.003746% · largest 0.001808%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 236,56 → 236,58 0.001808 ΔRGB(-5,-69,-73) antialiasing coverage residue on a shared outline AntialiasCoverage 237,56 → 238,58 0.001808 ΔRGB(8,102,107) antialiasing coverage residue on a shared outline AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-lists-counters-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>lists-counters x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-lists-counters {counter-reset:pair-item;}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-lists-counters f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.002757% · raw 0.002757% (28 px) interactions-cartesian-lists-counters-x-multicol · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 26.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for lists-counters and multicol: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 28 236,56 → 238,58 14 total 0.003617% · largest 0.001808%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 236,56 → 236,58 0.001808 ΔRGB(-5,-69,-73) antialiasing coverage residue on a shared outline AntialiasCoverage 237,56 → 238,58 0.001808 ΔRGB(8,102,107) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-lists-counters-x-multicol.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>lists-counters x multicol interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-lists-counters {counter-reset:pair-item;}
61 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-lists-counters f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.002757% · raw 0.002757% (28 px) interactions-cartesian-lists-counters-x-overflow-clipping · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 26.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for lists-counters and overflow-clipping: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 28 236,56 → 238,58 14 total 0.003617% · largest 0.001808%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 236,56 → 236,58 0.001808 ΔRGB(-5,-69,-73) antialiasing coverage residue on a shared outline AntialiasCoverage 237,56 → 238,58 0.001808 ΔRGB(8,102,107) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-lists-counters-x-overflow-clipping.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>lists-counters x overflow-clipping interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-lists-counters {counter-reset:pair-item;}
61 .f-overflow-clipping {overflow:hidden;max-height:58px;border-radius:9px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-lists-counters f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-overflow-clipping"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.002757% · raw 0.002757% (28 px) interactions-cartesian-lists-counters-x-positioning · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 26.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for lists-counters and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 28 236,56 → 238,58 14 total 0.003617% · largest 0.001808%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 236,56 → 236,58 0.001808 ΔRGB(-5,-69,-73) antialiasing coverage residue on a shared outline AntialiasCoverage 237,56 → 238,58 0.001808 ΔRGB(8,102,107) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-lists-counters-x-positioning.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>lists-counters x positioning interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-lists-counters {counter-reset:pair-item;}
61 .f-positioning {position:relative;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-lists-counters f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-positioning"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.002757% · raw 0.002757% (28 px) interactions-cartesian-lists-counters-x-selectors-cascade · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 26.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for lists-counters and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 28 236,56 → 238,58 14 total 0.003617% · largest 0.001808%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 236,56 → 236,58 0.001808 ΔRGB(-5,-69,-73) antialiasing coverage residue on a shared outline AntialiasCoverage 237,56 → 238,58 0.001808 ΔRGB(8,102,107) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-lists-counters-x-selectors-cascade.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>lists-counters x selectors-cascade interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-lists-counters {counter-reset:pair-item;}
61 .f-selectors-cascade {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-lists-counters f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-selectors-cascade"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.002757% · raw 0.002757% (28 px) interactions-cartesian-lists-counters-x-typography · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 26.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for lists-counters and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 28 236,56 → 238,58 14 total 0.003617% · largest 0.001808%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 236,56 → 236,58 0.001808 ΔRGB(-5,-69,-73) antialiasing coverage residue on a shared outline AntialiasCoverage 237,56 → 238,58 0.001808 ΔRGB(8,102,107) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-lists-counters-x-typography.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>lists-counters x typography interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-lists-counters {counter-reset:pair-item;}
61 .f-typography {font-size:18px;font-weight:700;letter-spacing:.7px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-lists-counters f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-typography"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000591% · raw 0.000591% (6 px) interactions-cartesian-backgrounds-borders-x-backgrounds-borders · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 2.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and backgrounds-borders: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (6 total; showing 6 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 6 6 17,44 → 469,119 1 total 0.000775% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 469,44 → 469,44 0.000129 ΔRGB(-10,-10,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 17,57 → 17,57 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 411,76 → 411,76 0.000129 ΔRGB(5,4,4) antialiasing coverage residue on a shared outline AntialiasCoverage 411,103 → 411,103 0.000129 ΔRGB(7,6,6) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 469,119 → 469,119 0.000129 ΔRGB(-12,-10,-9) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-backgrounds-borders.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x backgrounds-borders interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 </style>
62 </head>
63 <body>
64 <div class="stage"><div class="node f-backgrounds-borders f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
65 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 </body>
68 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000394% · raw 0.000591% (6 px) interactions-cartesian-backgrounds-borders-x-clip-mask · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 0.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and clip-mask: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (6 total; showing 6 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 6 6 17,68 → 409,125 1 total 0.000775% · largest 0.000129% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 362,68 → 362,68 0.000129 ΔRGB(6,7,5) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,110 → 362,110 0.000129 ΔRGB(15,14,12) antialiasing coverage residue on a shared outline AntialiasCoverage 361,110 → 361,110 0.000129 ΔRGB(-9,-8,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 382,122 → 382,122 0.000129 ΔE 0.5 ΔRGB(1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 409,125 → 409,125 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-clip-mask.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x clip-mask interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.000533% (2 px) interactions-cartesian-paged-media-x-transforms · same-element-and-bidirectional-nesting · 4 pages PASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.6
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff why: page 4: antialiasing coverage residue on a shared outline
Cartesian family interaction for paged-media and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 139,62 → 139,64 1 total 0.002023% · largest 0.001012%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 139,62 → 139,62 0.001012 ΔRGB(0,-1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 139,64 → 139,64 0.001012 ΔRGB(0,0,1) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-paged-media-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>paged-media x transforms interaction</title>
6 <style>
7 @page { size: 192px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 min-height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 padding: 7px;
35 border: 2px solid #577590;
36 background-color: #e7f5ff;
37 color: #17324d;
38 }
39 .node.inner {
40 width: 58px;
41 height: 48px;
42 padding: 5px;
43 }
44 .node.outer { min-height: 96px; }
45 .own { height: 22px; white-space: nowrap; }
46 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
47 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
48 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
49 .f-images-replaced > .own > .asset { display: inline-block; }
50 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
51 .f-lists-counters > .own > .token { counter-increment: pair-item; }
52 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
53 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
54 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
55 @supports (display:grid) {
56 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
57 }
58 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
59
60 body { display: block; padding: 0; font-size: 16px; white-space: normal; }
61 .stage { display: block; margin: 0; break-before: page; }
62 .stage > .node { min-height: 68px; margin: 47px auto 0; }
63 .stage > .node.outer { margin-top: 33px; }
64 .f-paged-media {break-before:page;break-inside:avoid;}
65 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
66 </style>
67 </head>
68 <body>
69 <div class="stage"><div class="node f-paged-media f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
70 <div class="stage"><div class="node outer f-paged-media"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
71 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-paged-media"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
72 </body>
73 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000492% · raw 0.000492% (5 px) interactions-cartesian-backgrounds-borders-x-block-box-model · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 3.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and block-box-model: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (5 total; showing 5 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 5 5 17,57 → 362,114 1 total 0.000646% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 17,57 → 17,57 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,72 → 362,72 0.000129 ΔRGB(12,11,11) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,114 → 362,114 0.000129 ΔRGB(10,9,8) antialiasing coverage residue on a shared outline AntialiasCoverage 361,114 → 361,114 0.000129 ΔRGB(-14,-13,-11) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-block-box-model.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x block-box-model interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-block-box-model {box-sizing:border-box;padding:11px 7px;min-width:92px;max-width:132px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-block-box-model"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-block-box-model"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-block-box-model"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000492% · raw 0.000492% (5 px) interactions-cartesian-backgrounds-borders-x-lists-counters · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 2.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and lists-counters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (5 total; showing 5 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 5 5 17,57 → 362,110 1 total 0.000646% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 17,57 → 17,57 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,68 → 362,68 0.000129 ΔRGB(6,7,5) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,110 → 362,110 0.000129 ΔRGB(15,14,12) antialiasing coverage residue on a shared outline AntialiasCoverage 361,110 → 361,110 0.000129 ΔRGB(-9,-8,-8) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-lists-counters.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x lists-counters interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-lists-counters {counter-reset:pair-item;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-lists-counters"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-lists-counters"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000492% · raw 0.000492% (5 px) interactions-cartesian-backgrounds-borders-x-selectors-cascade · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 2.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (5 total; showing 5 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 5 5 17,57 → 362,110 1 total 0.000646% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 17,57 → 17,57 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,68 → 362,68 0.000129 ΔRGB(6,7,5) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,110 → 362,110 0.000129 ΔRGB(15,14,12) antialiasing coverage residue on a shared outline AntialiasCoverage 361,110 → 361,110 0.000129 ΔRGB(-9,-8,-8) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-selectors-cascade.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x selectors-cascade interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-selectors-cascade {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-selectors-cascade"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000492% · raw 0.000492% (5 px) interactions-cartesian-backgrounds-borders-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 3.9
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (5 total; showing 5 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 5 5 126,69 → 413,119 1 total 0.000646% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 407,69 → 407,69 0.000129 ΔRGB(-9,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 413,86 → 413,86 0.000129 ΔRGB(15,15,13) antialiasing coverage residue on a shared outline AntialiasCoverage 357,93 → 357,93 0.000129 ΔRGB(10,10,9) antialiasing coverage residue on a shared outline AntialiasCoverage 126,119 → 126,119 0.000129 ΔRGB(14,14,13) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000492% · raw 0.000492% (5 px) interactions-cartesian-backgrounds-borders-x-typography · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 2.7
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (5 total; showing 5 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 5 5 17,57 → 362,110 1 total 0.000646% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 17,57 → 17,57 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,68 → 362,68 0.000129 ΔRGB(6,7,5) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 362,110 → 362,110 0.000129 ΔRGB(15,14,12) antialiasing coverage residue on a shared outline AntialiasCoverage 361,110 → 361,110 0.000129 ΔRGB(-9,-8,-8) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-typography.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x typography interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-typography {font-size:18px;font-weight:700;letter-spacing:.7px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-typography"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000394% · raw 0.000394% (4 px) interactions-cartesian-backgrounds-borders-x-flexbox · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 1.8
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and flexbox: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (4 total; showing 4 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 4 4 17,57 → 459,107 1 total 0.000517% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 17,57 → 17,57 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 459,68 → 459,68 0.000129 ΔRGB(-5,-5,-4) antialiasing coverage residue on a shared outline AntialiasCoverage 459,95 → 459,95 0.000129 ΔRGB(-8,-7,-6) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-flexbox.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x flexbox interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-flexbox {display:flex;align-items:center;justify-content:space-around;gap:4px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-flexbox"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-flexbox"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.000394% (4 px) interactions-cartesian-clip-mask-x-clip-mask · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.5
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and clip-mask: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (4 total; showing 4 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 4 4 192,120 → 409,125 1 total 0.000517% · largest 0.000129% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 192,120 → 192,120 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 218,122 → 218,122 0.000129 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline AntialiasCoverage 382,122 → 382,122 0.000129 ΔE 0.5 ΔRGB(1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 409,125 → 409,125 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-clip-mask.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x clip-mask interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 </style>
62 </head>
63 <body>
64 <div class="stage"><div class="node f-clip-mask f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
65 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 </body>
68 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000394% · raw 0.000394% (4 px) interactions-cartesian-generated-content-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 2.8
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for generated-content and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (4 total; showing 4 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 4 4 233,79 → 413,132 1 total 0.000517% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 413,86 → 413,86 0.000129 ΔRGB(13,11,9) antialiasing coverage residue on a shared outline AntialiasCoverage 247,108 → 247,108 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 233,132 → 233,132 0.000129 ΔRGB(-7,-6,-4) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-generated-content-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>generated-content x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-generated-content {}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-generated-content f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-generated-content"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000295% · raw 0.000295% (3 px) interactions-cartesian-backgrounds-borders-x-multicol · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 3.0
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and multicol: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3 total; showing 3 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 3 3 17,57 → 419,107 1 total 0.000388% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 17,57 → 17,57 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 419,88 → 419,88 0.000129 ΔRGB(-14,-13,-12) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-multicol.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x multicol interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000295% · raw 0.000295% (3 px) interactions-cartesian-backgrounds-borders-x-units-values · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 4.1
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3 total; showing 3 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 3 3 346,74 → 351,111 1 total 0.000388% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 346,74 → 346,74 0.000129 ΔRGB(-14,-13,-11) antialiasing coverage residue on a shared outline AntialiasCoverage 346,104 → 346,104 0.000129 ΔRGB(15,14,13) antialiasing coverage residue on a shared outline AntialiasCoverage 351,111 → 351,111 0.000129 ΔRGB(9,9,8) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-units-values.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x units-values interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-units-values {width:calc(100% - 9px);padding-left:5%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-units-values"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-units-values"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000098% · raw 0.000295% (3 px) interactions-cartesian-clip-mask-x-grid · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 0.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and grid: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3 total; showing 3 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 3 3 192,100 → 402,122 1 total 0.000388% · largest 0.000129% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 402,100 → 402,100 0.000129 ΔRGB(9,8,7) antialiasing coverage residue on a shared outline AntialiasCoverage 192,120 → 192,120 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 218,122 → 218,122 0.000129 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-grid.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x grid interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-grid {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-grid"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000098% · raw 0.000295% (3 px) interactions-cartesian-clip-mask-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 0.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3 total; showing 3 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 3 3 192,79 → 347,122 1 total 0.000388% · largest 0.000129% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 192,120 → 192,120 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 218,122 → 218,122 0.000129 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000295% · raw 0.000295% (3 px) interactions-cartesian-overflow-clipping-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 3.2
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for overflow-clipping and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
regions (3 total; showing 3 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 3 3 247,79 → 413,108 1 total 0.000388% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 413,86 → 413,86 0.000129 ΔRGB(13,11,9) antialiasing coverage residue on a shared outline AntialiasCoverage 247,108 → 247,108 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-overflow-clipping-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>overflow-clipping x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-overflow-clipping {overflow:hidden;max-height:58px;border-radius:9px;}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-overflow-clipping f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-overflow-clipping"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000197% · raw 0.000197% (2 px) interactions-cartesian-backgrounds-borders-x-generated-content · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 2.2
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and generated-content: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 17,57 → 17,107 1 total 0.000258% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 17,57 → 17,57 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-generated-content.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x generated-content interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-generated-content {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-generated-content"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000197% · raw 0.000197% (2 px) interactions-cartesian-backgrounds-borders-x-grid · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 2.2
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and grid: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 17,57 → 17,107 1 total 0.000258% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 17,57 → 17,57 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-grid.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x grid interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-grid {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-grid"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000197% · raw 0.000197% (2 px) interactions-cartesian-backgrounds-borders-x-tables · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 2.2
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for backgrounds-borders and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 17,57 → 17,107 1 total 0.000258% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 17,57 → 17,57 0.000129 ΔRGB(9,8,8) antialiasing coverage residue on a shared outline AntialiasCoverage 17,107 → 17,107 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-backgrounds-borders-x-tables.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>backgrounds-borders x tables interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-backgrounds-borders {border:3px double #355070;border-radius:12px;background-color:#dceeff;}
61 .f-tables {display:table;border-collapse:separate;border-spacing:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-backgrounds-borders f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-backgrounds-borders"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-tables"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-backgrounds-borders"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.000197% (2 px) interactions-cartesian-block-box-model-x-clip-mask · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.5
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for block-box-model and clip-mask: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 382,122 → 409,125 1 total 0.000258% · largest 0.000129% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 382,122 → 382,122 0.000129 ΔE 0.5 ΔRGB(1,0,-1) antialiasing coverage residue on a shared outline AntialiasCoverage 409,125 → 409,125 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-block-box-model-x-clip-mask.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>block-box-model x clip-mask interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-block-box-model {box-sizing:border-box;padding:11px 7px;min-width:92px;max-width:132px;}
61 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-block-box-model f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-block-box-model"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-block-box-model"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000197% · raw 0.000197% (2 px) interactions-cartesian-block-box-model-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 2.9
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for block-box-model and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 347,72 → 445,79 1 total 0.000258% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 445,72 → 445,72 0.000129 ΔRGB(-10,-9,-8) antialiasing coverage residue on a shared outline AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-block-box-model-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>block-box-model x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-block-box-model {box-sizing:border-box;padding:11px 7px;min-width:92px;max-width:132px;}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-block-box-model f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-block-box-model"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-block-box-model"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.000197% (2 px) interactions-cartesian-clip-mask-x-multicol · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.5
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and multicol: both representatives compose on one element and in both outer/inner orders. The standards-derived reference corrects Chromium's print-only half-pixel clip-path shift on the second fractional-width column.
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 2 192,120 → 218,122 1 total 0.000258% · largest 0.000129% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 192,120 → 192,120 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 218,122 → 218,122 0.000129 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-multicol.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x multicol interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-multicol {column-count:2;column-gap:7px;column-rule:2px solid #577590;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-multicol"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-multicol"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.000197% (2 px) interactions-cartesian-clip-mask-x-overflow-clipping · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.5
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and overflow-clipping: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 192,120 → 218,122 1 total 0.000258% · largest 0.000129% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 192,120 → 192,120 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 218,122 → 218,122 0.000129 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-overflow-clipping.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x overflow-clipping interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-overflow-clipping {overflow:hidden;max-height:58px;border-radius:9px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-overflow-clipping"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.000197% (2 px) interactions-cartesian-clip-mask-x-positioning · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.5
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 192,120 → 218,122 1 total 0.000258% · largest 0.000129% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 192,120 → 192,120 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 218,122 → 218,122 0.000129 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-positioning.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x positioning interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-positioning {position:relative;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-positioning"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.000197% (2 px) interactions-cartesian-clip-mask-x-selectors-cascade · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.5
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 192,120 → 218,122 1 total 0.000258% · largest 0.000129% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 192,120 → 192,120 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 218,122 → 218,122 0.000129 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-selectors-cascade.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x selectors-cascade interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-selectors-cascade {}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-selectors-cascade"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.000197% (2 px) interactions-cartesian-clip-mask-x-tables · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.5
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 192,120 → 218,122 1 total 0.000258% · largest 0.000129% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 192,120 → 192,120 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 218,122 → 218,122 0.000129 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-tables.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x tables interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-tables {display:table;border-collapse:separate;border-spacing:3px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-tables"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0% · raw 0.000197% (2 px) interactions-cartesian-clip-mask-x-typography · same-element-and-bidirectional-nestingPASS via raw same-coordinate visibility policy AntialiasCoverage ΔE 0.5
Chrome ref ironpress full-page >1.0%/channel diff why: antialiasing coverage residue on a shared outline
Cartesian family interaction for clip-mask and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 192,120 → 218,122 1 total 0.000258% · largest 0.000129% · max ΔE 0.5
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 192,120 → 192,120 0.000129 ΔE 0.5 ΔRGB(1,0,0) antialiasing coverage residue on a shared outline AntialiasCoverage 218,122 → 218,122 0.000129 ΔE 0.5 ΔRGB(1,1,0) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-clip-mask-x-typography.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>clip-mask x typography interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-clip-mask {clip-path:polygon(5% 0,100% 8%,94% 100%,0 88%);}
61 .f-typography {font-size:18px;font-weight:700;letter-spacing:.7px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-clip-mask f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-clip-mask"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-typography"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-clip-mask"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000197% · raw 0.000197% (2 px) interactions-cartesian-generated-content-x-overflow-clipping · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 6.4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for generated-content and overflow-clipping: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 25,109 → 25,109 2 total 0.000258% · largest 0.000258%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 25,109 → 25,109 0.000258 ΔRGB(-12,-4,-6) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-generated-content-x-overflow-clipping.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>generated-content x overflow-clipping interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-generated-content {}
61 .f-overflow-clipping {overflow:hidden;max-height:58px;border-radius:9px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-generated-content f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-generated-content"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-overflow-clipping"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-overflow-clipping"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-generated-content"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000197% · raw 0.000197% (2 px) interactions-cartesian-grid-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 3.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for grid and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 347,79 → 413,86 1 total 0.000258% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 413,86 → 413,86 0.000129 ΔRGB(13,11,9) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-grid-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>grid x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-grid {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px;}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-grid f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-grid"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-grid"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000197% · raw 0.000197% (2 px) interactions-cartesian-positioning-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 3.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for positioning and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 347,79 → 413,86 1 total 0.000258% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 413,86 → 413,86 0.000129 ΔRGB(13,11,9) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-positioning-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>positioning x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-positioning {position:relative;}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-positioning f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-positioning"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-positioning"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000197% · raw 0.000197% (2 px) interactions-cartesian-selectors-cascade-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 2.5
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for selectors-cascade and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 347,79 → 413,86 1 total 0.000258% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 413,86 → 413,86 0.000129 ΔRGB(20,3,8) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-selectors-cascade-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>selectors-cascade x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-selectors-cascade {}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-selectors-cascade f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-selectors-cascade"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-selectors-cascade"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000197% · raw 0.000197% (2 px) interactions-cartesian-tables-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 3.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for tables and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 347,79 → 413,86 1 total 0.000258% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline AntialiasCoverage 413,86 → 413,86 0.000129 ΔRGB(13,11,9) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-tables-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>tables x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-tables {display:table;border-collapse:separate;border-spacing:3px;}
61 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-tables f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-tables"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-tables"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000197% · raw 0.000197% (2 px) interactions-cartesian-transforms-x-typography · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 2.6
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for transforms and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 2 249,77 → 414,86 1 total 0.000258% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 414,77 → 414,77 0.000129 ΔRGB(12,11,9) antialiasing coverage residue on a shared outline AntialiasCoverage 249,86 → 249,86 0.000129 ΔRGB(-8,-7,-6) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-transforms-x-typography.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>transforms x typography interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
61 .f-typography {font-size:18px;font-weight:700;letter-spacing:.7px;}
62 </style>
63 </head>
64 <body>
65 <div class="stage"><div class="node f-transforms f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
66 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-typography"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 <div class="stage"><div class="node outer f-typography"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
68 </body>
69 </html>
PASS visually equivalent · no rejecting defect · thresholded evidence 0.000098% · raw 0.000098% (1 px) interactions-cartesian-transforms-x-transforms · same-element-and-bidirectional-nestingPASS via CSS-scale observation: sub-CSS shared-colour coverage AntialiasCoverage ΔE 3.4
Chrome ref ironpress full-page >1.0%/channel diff why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline
Cartesian family interaction for transforms and transforms: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
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 347,79 → 347,79 1 total 0.000129% · largest 0.000129%
Representative region details (worst-first) class bbox (CSS px) area% magnitude reason AntialiasCoverage 347,79 → 347,79 0.000129 ΔRGB(-12,-11,-9) antialiasing coverage residue on a shared outline
source · cases/interactions/interactions-cartesian-transforms-x-transforms.html 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>transforms x transforms interaction</title>
6 <style>
7 @page { size: 520px 200px; margin: 0; }
8
9 @font-face {
10 font-family: MatrixSans;
11 src: url('../../fonts/ParitySans.ttf') format('truetype');
12 font-style: normal;
13 font-weight: 400;
14 }
15 html { font-family: ParitySans; font-size: 16px; line-height: 1.2; }
16 * { box-sizing: border-box; margin: 0; }
17 html, body { background: #ffffff; }
18 body { padding: 16px; color: #17324d; font-size: 0; white-space: nowrap; }
19 .stage {
20 display: inline-flex;
21 width: 156px;
22 height: 164px;
23 margin-right: 8px;
24 align-items: center;
25 justify-content: center;
26 background: #f7fafc;
27 border: 1px solid #cbd5e1;
28 font-size: 16px;
29 vertical-align: top;
30 }
31 .stage:last-child { margin-right: 0; }
32 .node {
33 width: 126px;
34 height: 68px;
35 padding: 7px;
36 border: 2px solid #577590;
37 background-color: #e7f5ff;
38 color: #17324d;
39 }
40 .node.inner {
41 width: 58px;
42 height: 48px;
43 padding: 5px;
44 }
45 .node.outer { height: 96px; }
46 .own { height: 22px; white-space: nowrap; }
47 .asset { display: none; width: 34px; height: 24px; object-fit: cover; object-position: 70% 50%; }
48 .f-generated-content::before { content: '‹'; color: #d62828; font-weight: 700; }
49 .f-generated-content::after { content: '›'; color: #2a9d8f; font-weight: 700; }
50 .f-images-replaced > .own > .asset { display: inline-block; }
51 .f-inline-text > .own > .token:first-of-type { font-size: .72em; vertical-align: super; }
52 .f-lists-counters > .own > .token { counter-increment: pair-item; }
53 .f-lists-counters > .own > .token::before { content: counter(pair-item) '.'; color: #d62828; }
54 .f-positioning > .own > .token:last-of-type { position: absolute; right: 4px; bottom: 4px; }
55 .f-selectors-cascade:is(.node) > .own > .token:nth-of-type(2) { color: #c1121f; }
56 @supports (display:grid) {
57 .f-selectors-cascade { border-left-color: #06d6a0; border-right-color: #06d6a0; }
58 }
59 .f-tables > .own > .token { display: table-cell; vertical-align: middle; }
60 .f-transforms {transform:translate(2px,-1px) rotate(5deg);transform-origin:20% 70%;}
61 </style>
62 </head>
63 <body>
64 <div class="stage"><div class="node f-transforms f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div>
65 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
66 <div class="stage"><div class="node outer f-transforms"><div class="own"><span class="token">Ag</span><span class="token">Bb</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div><div class="node inner f-transforms"><div class="own"><span class="token">A</span><span class="token">B</span><img class="asset" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAIElEQVR42mM4IScHR3I9NnDEgFNCzu0EHN1ZJQJHOCUAni4lgeO2HLIAAAAASUVORK5CYII="></div></div></div></div>
67 </body>
68 </html>
PASS exact match interactions-cartesian-backgrounds-borders-x-overflow-clipping · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for backgrounds-borders and overflow-clipping: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-block-box-model-x-block-box-model · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for block-box-model and block-box-model: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-block-box-model-x-flexbox · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for block-box-model and flexbox: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-block-box-model-x-generated-content · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for block-box-model and generated-content: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-block-box-model-x-grid · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for block-box-model and grid: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-block-box-model-x-multicol · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for block-box-model and multicol: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-block-box-model-x-overflow-clipping · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for block-box-model and overflow-clipping: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-block-box-model-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff Physical-page-context interaction for page-margins and block-box-model: the block-box-model representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
PASS exact match interactions-cartesian-block-box-model-x-paged-media · same-element-and-bidirectional-nesting · 4 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for block-box-model and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-block-box-model-x-positioning · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for block-box-model and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-block-box-model-x-selectors-cascade · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for block-box-model and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-block-box-model-x-tables · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for block-box-model and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-block-box-model-x-typography · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for block-box-model and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-clip-mask-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff Physical-page-context interaction for page-margins and clip-mask: the clip-mask representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
PASS exact match interactions-cartesian-clip-mask-x-paged-media · same-element-and-bidirectional-nesting · 4 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for clip-mask and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-color-opacity-x-flexbox · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for color-opacity and flexbox: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-color-opacity-x-grid · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for color-opacity and grid: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-color-opacity-x-tables · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for color-opacity and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-flexbox-x-flexbox · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for flexbox and flexbox: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-flexbox-x-generated-content · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for flexbox and generated-content: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-flexbox-x-grid · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for flexbox and grid: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-flexbox-x-overflow-clipping · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for flexbox and overflow-clipping: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-flexbox-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff Physical-page-context interaction for page-margins and flexbox: the flexbox representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
PASS exact match interactions-cartesian-flexbox-x-paged-media · same-element-and-bidirectional-nesting · 3 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for flexbox and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-flexbox-x-selectors-cascade · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for flexbox and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-flexbox-x-tables · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for flexbox and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-flexbox-x-typography · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for flexbox and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-flexbox-x-units-values · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for flexbox and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-generated-content-x-generated-content · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for generated-content and generated-content: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-generated-content-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff Physical-page-context interaction for page-margins and generated-content: the generated-content representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
PASS exact match interactions-cartesian-generated-content-x-paged-media · same-element-and-bidirectional-nesting · 4 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for generated-content and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-generated-content-x-positioning · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for generated-content and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-generated-content-x-selectors-cascade · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for generated-content and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-generated-content-x-tables · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for generated-content and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-generated-content-x-typography · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for generated-content and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-generated-content-x-units-values · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for generated-content and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-grid-x-grid · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for grid and grid: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-grid-x-lists-counters · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for grid and lists-counters: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-grid-x-overflow-clipping · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for grid and overflow-clipping: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-grid-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff Physical-page-context interaction for page-margins and grid: the grid representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
PASS exact match interactions-cartesian-grid-x-paged-media · same-element-and-bidirectional-nesting · 3 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for grid and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-grid-x-selectors-cascade · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for grid and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-grid-x-tables · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for grid and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-grid-x-typography · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for grid and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-grid-x-units-values · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for grid and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-lists-counters-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff Physical-page-context interaction for page-margins and lists-counters: the lists-counters representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
PASS exact match interactions-cartesian-lists-counters-x-paged-media · same-element-and-bidirectional-nesting · 4 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for lists-counters and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-multicol-x-overflow-clipping · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for multicol and overflow-clipping: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-multicol-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff Physical-page-context interaction for page-margins and multicol: the multicol representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
PASS exact match interactions-cartesian-multicol-x-paged-media · same-element-and-bidirectional-nesting · 4 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for multicol and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-multicol-x-positioning · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for multicol and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-multicol-x-selectors-cascade · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for multicol and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-multicol-x-tables · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for multicol and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-multicol-x-typography · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for multicol and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-overflow-clipping-x-overflow-clipping · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for overflow-clipping and overflow-clipping: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-overflow-clipping-x-paged-media · same-element-and-bidirectional-nesting · 3 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for overflow-clipping and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-overflow-clipping-x-positioning · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for overflow-clipping and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-overflow-clipping-x-tables · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for overflow-clipping and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-overflow-clipping-x-typography · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for overflow-clipping and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-overflow-clipping-x-units-values · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for overflow-clipping and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-page-margins-x-page-margins · physical-page-context-and-nested-feature-depths · 3 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff Page-margin self-interaction across first/right, left, and later-right physical pages. Intentionally asymmetric margins make page-side selection, cascade, content origins, available block size, page-area paint boundaries, and root-flow gutters conspicuous.
PASS exact match interactions-cartesian-page-margins-x-positioning · physical-page-context-and-nested-feature-depths · 3 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff Physical-page-context interaction for page-margins and positioning: the positioning representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
PASS exact match interactions-cartesian-page-margins-x-tables · physical-page-context-and-nested-feature-depths · 3 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff Physical-page-context interaction for page-margins and tables: the tables representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
PASS exact match interactions-cartesian-page-margins-x-typography · physical-page-context-and-nested-feature-depths · 3 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff Physical-page-context interaction for page-margins and typography: the typography representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
PASS exact match interactions-cartesian-page-margins-x-units-values · physical-page-context-and-nested-feature-depths · 3 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff Physical-page-context interaction for page-margins and units-values: the units-values representative is exercised on the stage subject and at both nesting depths across first/right, left, and later-right physical pages. Intentionally asymmetric margins put layout and graphical effects directly against conspicuous page-area boundaries; stages also shift through root padding to detect conflated clips.
PASS exact match interactions-cartesian-paged-media-x-paged-media · same-element-and-bidirectional-nesting · 5 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff page 5
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for paged-media and paged-media: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-paged-media-x-positioning · same-element-and-bidirectional-nesting · 4 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for paged-media and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-paged-media-x-selectors-cascade · same-element-and-bidirectional-nesting · 4 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for paged-media and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-paged-media-x-tables · same-element-and-bidirectional-nesting · 4 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for paged-media and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-paged-media-x-typography · same-element-and-bidirectional-nesting · 4 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for paged-media and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-paged-media-x-units-values · same-element-and-bidirectional-nesting · 4 pages
page 1
Chrome ref ironpress full-page >1.0%/channel diff page 2
Chrome ref ironpress full-page >1.0%/channel diff page 3
Chrome ref ironpress full-page >1.0%/channel diff page 4
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for paged-media and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-positioning-x-positioning · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for positioning and positioning: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-positioning-x-selectors-cascade · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for positioning and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-positioning-x-units-values · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for positioning and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-selectors-cascade-x-selectors-cascade · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for selectors-cascade and selectors-cascade: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-selectors-cascade-x-tables · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for selectors-cascade and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-selectors-cascade-x-typography · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for selectors-cascade and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-selectors-cascade-x-units-values · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for selectors-cascade and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-tables-x-tables · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for tables and tables: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-tables-x-units-values · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for tables and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-typography-x-typography · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for typography and typography: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-typography-x-units-values · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for typography and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
PASS exact match interactions-cartesian-units-values-x-units-values · same-element-and-bidirectional-nesting
Chrome ref ironpress full-page >1.0%/channel diff Cartesian family interaction for units-values and units-values: both representatives compose on one element and in both outer/inner orders. Paged-media representatives force actual page breaks.
