PASS mask-webkit-alias · prefixed-alias
-webkit-mask-image (prefixed alias) fades a solid fill top-to-bottom; the alias must behave as mask-image. CSS mask is unsupported.
-webkit-mask-image — 100.00% verified visual parity all categories ↑
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 36 | 36 | 6,6 → 114,114 | 1 | total 0.03% · largest 0.000709% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 33,6 → 33,6 | 0.000709 | ΔRGB(3,12,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 87,6 → 87,6 | 0.000709 | ΔRGB(3,12,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 31,7 → 31,7 | 0.000709 | ΔRGB(2,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 23,12 → 23,12 | 0.000709 | ΔRGB(1,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 97,12 → 97,12 | 0.000709 | ΔRGB(1,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 23,13 → 23,13 | 0.000709 | ΔRGB(2,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 98,13 → 98,13 | 0.000709 | ΔRGB(2,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 22,13 → 22,13 | 0.000709 | ΔRGB(2,12,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 98,13 → 98,13 | 0.000709 | ΔRGB(2,12,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 13,22 → 13,22 | 0.000709 | ΔRGB(2,12,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 107,22 → 107,22 | 0.000709 | ΔRGB(2,12,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 13,22 → 13,22 | 0.000709 | ΔRGB(2,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 107,22 → 107,22 | 0.000709 | ΔRGB(2,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 13,23 → 13,23 | 0.000709 | ΔRGB(1,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 108,23 → 108,23 | 0.000709 | ΔRGB(1,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 7,31 → 7,31 | 0.000709 | ΔRGB(2,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 6,33 → 6,33 | 0.000709 | ΔRGB(3,12,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 114,33 → 114,33 | 0.000709 | ΔRGB(3,12,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 6,87 → 6,87 | 0.000709 | ΔRGB(3,12,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 114,87 → 114,87 | 0.000709 | ΔRGB(3,12,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 7,89 → 7,89 | 0.000709 | ΔRGB(2,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 13,97 → 13,97 | 0.000709 | ΔRGB(1,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 108,97 → 108,97 | 0.000709 | ΔRGB(1,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 13,97 → 13,97 | 0.000709 | ΔRGB(2,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 107,97 → 107,97 | 0.000709 | ΔRGB(2,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 13,98 → 13,98 | 0.000709 | ΔRGB(2,12,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 107,98 → 107,98 | 0.000709 | ΔRGB(2,12,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 22,107 → 22,107 | 0.000709 | ΔRGB(2,12,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 98,107 → 98,107 | 0.000709 | ΔRGB(2,12,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 23,107 → 23,107 | 0.000709 | ΔRGB(2,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 98,107 → 98,107 | 0.000709 | ΔRGB(2,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 23,107 → 23,107 | 0.000709 | ΔRGB(1,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 97,107 → 97,107 | 0.000709 | ΔRGB(1,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 31,113 → 31,113 | 0.000709 | ΔRGB(2,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 33,114 → 33,114 | 0.000709 | ΔRGB(3,12,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 87,114 → 87,114 | 0.000709 | ΔRGB(3,12,12) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 clip path circle default closest side</title>
6<style>
7 @page { size: 200px 120px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 200px; height: 120px; background: #d32f2f; clip-path: circle(); }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 56 | 56 | 1,1 → 159,159 | 1 | total 0.02% · largest 0.000398% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 70,1 → 70,1 | 0.000398 | ΔRGB(4,18,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 90,1 → 90,1 | 0.000398 | ΔRGB(4,18,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 60,3 → 60,3 | 0.000398 | ΔRGB(5,19,19) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 100,3 → 100,3 | 0.000398 | ΔRGB(5,19,19) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 58,3 → 58,3 | 0.000398 | ΔRGB(3,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 102,3 → 102,3 | 0.000398 | ΔRGB(3,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 58,3 → 58,3 | 0.000398 | ΔRGB(4,16,16) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 102,3 → 102,3 | 0.000398 | ΔRGB(4,16,16) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 44,8 → 44,8 | 0.000398 | ΔRGB(5,17,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 116,8 → 116,8 | 0.000398 | ΔRGB(5,17,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 30,17 → 30,17 | 0.000398 | ΔRGB(2,8,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 130,17 → 130,17 | 0.000398 | ΔRGB(2,8,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 27,20 → 27,20 | 0.000398 | ΔRGB(4,15,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 133,20 → 133,20 | 0.000398 | ΔRGB(4,15,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 20,27 → 20,27 | 0.000398 | ΔRGB(4,15,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 140,27 → 140,27 | 0.000398 | ΔRGB(4,15,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 17,30 → 17,30 | 0.000398 | ΔRGB(2,8,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 143,30 → 143,30 | 0.000398 | ΔRGB(2,8,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 8,44 → 8,44 | 0.000398 | ΔRGB(5,17,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 152,44 → 152,44 | 0.000398 | ΔRGB(5,17,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,58 → 3,58 | 0.000398 | ΔRGB(4,16,16) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,58 → 157,58 | 0.000398 | ΔRGB(4,16,16) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,58 → 3,58 | 0.000398 | ΔRGB(3,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,58 → 157,58 | 0.000398 | ΔRGB(3,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,60 → 3,60 | 0.000398 | ΔRGB(5,19,19) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,60 → 157,60 | 0.000398 | ΔRGB(5,19,19) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,70 → 1,70 | 0.000398 | ΔRGB(4,18,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 159,70 → 159,70 | 0.000398 | ΔRGB(4,18,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,90 → 1,90 | 0.000398 | ΔRGB(4,18,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 159,90 → 159,90 | 0.000398 | ΔRGB(4,18,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,100 → 3,100 | 0.000398 | ΔRGB(5,19,19) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,100 → 157,100 | 0.000398 | ΔRGB(5,19,19) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,102 → 3,102 | 0.000398 | ΔRGB(3,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,102 → 157,102 | 0.000398 | ΔRGB(3,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,102 → 3,102 | 0.000398 | ΔRGB(4,16,16) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,102 → 157,102 | 0.000398 | ΔRGB(4,16,16) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 8,116 → 8,116 | 0.000398 | ΔRGB(5,17,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 152,116 → 152,116 | 0.000398 | ΔRGB(5,17,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 17,130 → 17,130 | 0.000398 | ΔRGB(2,8,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 143,130 → 143,130 | 0.000398 | ΔRGB(2,8,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 20,133 → 20,133 | 0.000398 | ΔRGB(4,15,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 140,133 → 140,133 | 0.000398 | ΔRGB(4,15,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 27,140 → 27,140 | 0.000398 | ΔRGB(4,15,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 133,140 → 133,140 | 0.000398 | ΔRGB(4,15,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 30,143 → 30,143 | 0.000398 | ΔRGB(2,8,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 130,143 → 130,143 | 0.000398 | ΔRGB(2,8,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 44,152 → 44,152 | 0.000398 | ΔRGB(5,17,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 116,152 → 116,152 | 0.000398 | ΔRGB(5,17,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 58,157 → 58,157 | 0.000398 | ΔRGB(4,16,16) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 102,157 → 102,157 | 0.000398 | ΔRGB(4,16,16) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 58,157 → 58,157 | 0.000398 | ΔRGB(3,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 102,157 → 102,157 | 0.000398 | ΔRGB(3,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 60,157 → 60,157 | 0.000398 | ΔRGB(5,19,19) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 100,157 → 100,157 | 0.000398 | ΔRGB(5,19,19) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 70,159 → 70,159 | 0.000398 | ΔRGB(4,18,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 90,159 → 90,159 | 0.000398 | ΔRGB(4,18,18) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>clip-path circle</title>
6<style>
7 @page { size: 280px 200px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box {
12 width: 200px;
13 height: 200px;
14 background-color: #c62828;
15 /* Clip the square down to a centered circle. */
16 clip-path: circle(80px at 100px 100px);
17 }
18</style>
19</head>
20<body>
21 <div class="box"></div>
22</body>
23</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 10 | 10 | 11,1 → 85,90 | 1 | total 0.01% · largest 0.001178% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 23,1 → 23,1 | 0.001178 | ΔRGB(3,13,13) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 73,1 → 73,1 | 0.001178 | ΔRGB(2,10,10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 11,72 → 11,72 | 0.001178 | ΔRGB(2,9,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 85,72 → 85,72 | 0.001178 | ΔRGB(3,18,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 23,83 → 23,83 | 0.001178 | ΔRGB(3,18,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 73,83 → 73,83 | 0.001178 | ΔRGB(4,17,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 26,84 → 26,84 | 0.001178 | ΔRGB(3,18,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 70,84 → 70,84 | 0.001178 | ΔRGB(4,17,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 44,90 → 44,90 | 0.001178 | ΔRGB(4,18,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 52,90 → 52,90 | 0.001178 | ΔRGB(4,17,17) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 clip path circle position keywords</title>
6<style>
7 @page { size: 200px 144px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 200px; height: 140px; background: #d32f2f; clip-path: circle(48px at left 55px top 42px); }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 32 | 32 | 1,0 → 199,120 | 1 | total 0.01% · largest 0.000425% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 88,0 → 88,0 | 0.000425 | ΔRGB(13,6,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 112,0 → 112,0 | 0.000425 | ΔRGB(13,6,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 72,2 → 72,2 | 0.000425 | ΔRGB(10,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 128,2 → 128,2 | 0.000425 | ΔRGB(10,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 54,7 → 54,7 | 0.000425 | ΔRGB(15,7,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 146,7 → 146,7 | 0.000425 | ΔRGB(15,7,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 41,12 → 41,12 | 0.000425 | ΔRGB(7,4,3) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 159,12 → 159,12 | 0.000425 | ΔRGB(7,4,3) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 16,28 → 16,28 | 0.000425 | ΔRGB(10,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 184,28 → 184,28 | 0.000425 | ΔRGB(10,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 12,32 → 12,32 | 0.000425 | ΔRGB(21,10,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 188,32 → 188,32 | 0.000425 | ΔRGB(21,10,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 8,36 → 8,36 | 0.000425 | ΔRGB(22,11,10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 192,36 → 192,36 | 0.000425 | ΔRGB(22,11,10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,50 → 1,50 | 0.000425 | ΔRGB(16,8,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 199,50 → 199,50 | 0.000425 | ΔRGB(16,8,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,70 → 1,70 | 0.000425 | ΔRGB(16,8,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 199,70 → 199,70 | 0.000425 | ΔRGB(16,8,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 8,84 → 8,84 | 0.000425 | ΔRGB(22,11,10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 192,84 → 192,84 | 0.000425 | ΔRGB(22,11,10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 12,88 → 12,88 | 0.000425 | ΔRGB(21,10,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 188,88 → 188,88 | 0.000425 | ΔRGB(21,10,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 16,92 → 16,92 | 0.000425 | ΔRGB(10,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 184,92 → 184,92 | 0.000425 | ΔRGB(10,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 41,108 → 41,108 | 0.000425 | ΔRGB(7,4,3) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 159,108 → 159,108 | 0.000425 | ΔRGB(7,4,3) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 54,113 → 54,113 | 0.000425 | ΔRGB(15,7,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 146,113 → 146,113 | 0.000425 | ΔRGB(15,7,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 72,118 → 72,118 | 0.000425 | ΔRGB(10,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 128,118 → 128,118 | 0.000425 | ΔRGB(10,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 88,120 → 88,120 | 0.000425 | ΔRGB(13,6,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 112,120 → 112,120 | 0.000425 | ΔRGB(13,6,5) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>clip-path ellipse</title>
6<style>
7 @page { size: 320px 160px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box {
12 width: 240px;
13 height: 160px;
14 background-color: #00838f;
15 /* Clip the rectangle to a centered ellipse with distinct x/y radii. */
16 clip-path: ellipse(100px 60px at 120px 80px);
17 }
18</style>
19</head>
20<body>
21 <div class="box"></div>
22</body>
23</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 8 | 8 | 0,3 → 106,79 | 1 | total 0.008399% · largest 0.001050% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 45,3 → 45,3 | 0.001050 | ΔRGB(11,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 99,3 → 99,3 | 0.001050 | ΔRGB(7,4,3) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 38,5 → 38,5 | 0.001050 | ΔRGB(13,6,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 106,5 → 106,5 | 0.001050 | ΔRGB(15,7,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 0,37 → 0,37 | 0.001050 | ΔRGB(18,9,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 0,46 → 0,46 | 0.001050 | ΔRGB(19,9,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 38,79 → 38,79 | 0.001050 | ΔRGB(21,10,10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 106,79 → 106,79 | 0.001050 | ΔRGB(22,11,10) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 clip path ellipse position keywords</title>
6<style>
7 @page { size: 224px 144px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 220px; height: 140px; background: #00838f; clip-path: ellipse(72px 42px at right 50px bottom 38px); }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 16 | 16 | 0,20 → 127,135 | 1 | total 0.009153% · largest 0.000572% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 2,20 → 2,20 | 0.000572 | ΔRGB(10,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 125,20 → 125,20 | 0.000572 | ΔRGB(10,5,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 0,33 → 0,33 | 0.000572 | ΔRGB(13,6,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 127,33 → 127,33 | 0.000572 | ΔRGB(13,6,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 0,58 → 0,58 | 0.000572 | ΔRGB(15,7,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 127,58 → 127,58 | 0.000572 | ΔRGB(15,7,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 2,72 → 2,72 | 0.000572 | ΔRGB(4,2,2) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 125,72 → 125,72 | 0.000572 | ΔRGB(4,2,2) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 10,96 → 10,96 | 0.000572 | ΔRGB(14,7,6) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 118,96 → 118,96 | 0.000572 | ΔRGB(14,7,6) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 22,116 → 22,116 | 0.000572 | ΔRGB(24,11,10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 106,116 → 106,116 | 0.000572 | ΔRGB(24,11,10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 24,120 → 24,120 | 0.000572 | ΔRGB(22,11,10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 103,120 → 103,120 | 0.000572 | ΔRGB(22,11,10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 44,135 → 44,135 | 0.000572 | ΔRGB(15,7,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 84,135 → 84,135 | 0.000572 | ΔRGB(15,7,7) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 clip path ellipse extent keywords</title>
6<style>
7 @page { size: 224px 144px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 220px; height: 140px; background: #00838f; clip-path: ellipse(closest-side farthest-side at 64px 46px); }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 8 | 8 | 0,0 → 200,120 | 1 | total 0.003399% · largest 0.000425% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 35,0 → 35,0 | 0.000425 | ΔRGB(10,16,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 165,0 → 165,0 | 0.000425 | ΔRGB(10,16,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 0,35 → 0,35 | 0.000425 | ΔRGB(10,16,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 200,35 → 200,35 | 0.000425 | ΔRGB(10,16,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 0,85 → 0,85 | 0.000425 | ΔRGB(10,16,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 200,85 → 200,85 | 0.000425 | ΔRGB(10,16,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 35,120 → 35,120 | 0.000425 | ΔRGB(10,16,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 165,120 → 165,120 | 0.000425 | ΔRGB(10,16,7) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>clip-path inset rounded</title>
6<style>
7 @page { size: 320px 160px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box {
12 width: 240px;
13 height: 160px;
14 background-color: #6a1b9a;
15 /* Inset clip with a rounded-corner radius. */
16 clip-path: inset(20px round 40px);
17 }
18</style>
19</head>
20<body>
21 <div class="box"></div>
22</body>
23</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 16 | 18 | 0,0 → 23,106 | 3 | total 0.01% · largest 0.001741% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 5,4 → 5,4 | 0.001741 | ΔRGB(10,16,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 23,0 → 23,0 | 0.000580 | ΔRGB(6,10,4) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 22,0 → 22,0 | 0.000580 | ΔRGB(13,19,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 13,1 → 13,1 | 0.000580 | ΔRGB(6,9,4) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 11,2 → 11,2 | 0.000580 | ΔRGB(9,14,6) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 5,4 → 5,4 | 0.000580 | ΔRGB(4,6,3) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 0,84 → 0,84 | 0.000580 | ΔRGB(9,14,6) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 0,86 → 0,86 | 0.000580 | ΔRGB(12,19,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,88 → 1,88 | 0.000580 | ΔRGB(14,21,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 2,95 → 2,95 | 0.000580 | ΔRGB(6,10,4) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,96 → 3,96 | 0.000580 | ΔRGB(4,6,3) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 5,101 → 5,101 | 0.000580 | ΔRGB(9,14,6) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 6,101 → 6,101 | 0.000580 | ΔRGB(12,19,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 11,105 → 11,105 | 0.000580 | ΔRGB(12,20,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 12,106 → 12,106 | 0.000580 | ΔRGB(12,20,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 13,106 → 13,106 | 0.000580 | ΔRGB(12,19,8) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 clip path inset round elliptical radii</title>
6<style>
7 @page { size: 232px 152px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 230px; height: 150px; background: #6a1b9a; clip-path: inset(12px 22px 32px 42px round 28px 8px 36px 14px / 10px 30px 16px 26px); }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| Extra | 1 | 1 | 160,108 → 160,108 | 1 | total 0.000591% · largest 0.000591% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| Extra | 160,108 → 160,108 | 0.000591 | candidate adds paint absent from reference (0.000591%) |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 clip path path triangle</title>
6<style>
7 @page { size: 200px 144px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 200px; height: 140px; background: #ef6c00; clip-path: path("M 20 120 L 100 12 L 180 120 Z"); }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 27 | 30 | 0,0 → 145,88 | 2 | total 0.02% · largest 0.001596% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 8,3 → 8,3 | 0.001596 | ΔRGB(15,9,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 8,85 → 8,85 | 0.001596 | ΔRGB(15,10,14) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 9,86 → 9,86 | 0.001596 | ΔRGB(18,11,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 16,0 → 16,0 | 0.000798 | ΔRGB(8,5,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 130,0 → 130,0 | 0.000798 | ΔRGB(15,10,14) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 132,1 → 132,1 | 0.000798 | ΔRGB(15,9,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 9,2 → 9,2 | 0.000798 | ΔRGB(13,8,13) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 9,3 → 9,3 | 0.000798 | ΔRGB(18,11,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 8,3 → 8,3 | 0.000798 | ΔRGB(12,8,11) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 4,7 → 4,7 | 0.000798 | ΔRGB(9,6,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,8 → 3,8 | 0.000798 | ΔRGB(17,11,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,9 → 3,9 | 0.000798 | ΔRGB(12,7,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 2,9 → 2,9 | 0.000798 | ΔRGB(15,9,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 144,12 → 144,12 | 0.000798 | ΔRGB(18,11,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 145,15 → 145,15 | 0.000798 | ΔRGB(19,12,19) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 0,16 → 0,16 | 0.000798 | ΔRGB(12,8,11) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 0,72 → 0,72 | 0.000798 | ΔRGB(13,8,13) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 145,73 → 145,73 | 0.000798 | ΔRGB(18,11,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 144,76 → 144,76 | 0.000798 | ΔRGB(19,12,19) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 2,79 → 2,79 | 0.000798 | ΔRGB(10,6,11) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,79 → 3,79 | 0.000798 | ΔRGB(18,11,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,80 → 3,80 | 0.000798 | ΔRGB(19,12,19) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 4,82 → 4,82 | 0.000798 | ΔRGB(4,3,4) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 8,85 → 8,85 | 0.000798 | ΔRGB(8,5,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 132,87 → 132,87 | 0.000798 | ΔRGB(8,5,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 16,88 → 16,88 | 0.000798 | ΔRGB(15,9,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 130,88 → 130,88 | 0.000798 | ΔRGB(4,3,4) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 clip path rect rounded</title>
6<style>
7 @page { size: 224px 144px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 220px; height: 140px; background: #2e7d32; clip-path: rect(22px 180px 110px 35px round 18px); }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 342 | 576 | 1,0 → 167,117 | 10 | total 0.3% · largest 0.005176% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 4,77 → 5,79 | 0.005176 | ΔRGB(-3,-18,-18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 163,77 → 164,79 | 0.005176 | ΔRGB(-3,-18,-18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 53,4 → 55,4 | 0.004141 | ΔRGB(-3,-13,-13) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 113,4 → 115,4 | 0.004141 | ΔRGB(-3,-13,-13) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,41 → 4,42 | 0.003106 | ΔRGB(-3,-14,-14) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 164,41 → 164,42 | 0.003106 | ΔRGB(-3,-14,-14) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 58,3 → 59,3 | 0.002070 | ΔRGB(-3,-13,-13) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 109,3 → 110,3 | 0.002070 | ΔRGB(-3,-13,-13) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 55,3 → 56,3 | 0.002070 | ΔRGB(-2,-10,-10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 112,3 → 113,3 | 0.002070 | ΔRGB(-2,-10,-10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 52,4 → 52,4 | 0.002070 | ΔRGB(-3,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 115,4 → 116,4 | 0.002070 | ΔRGB(-3,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 6,35 → 7,36 | 0.002070 | ΔRGB(-3,-13,-13) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 161,35 → 161,36 | 0.002070 | ΔRGB(-3,-13,-13) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 2,72 → 2,72 | 0.002070 | ΔRGB(-3,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 165,72 → 166,72 | 0.002070 | ΔRGB(-3,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 7,83 → 7,83 | 0.002070 | ΔRGB(-2,-9,-9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 160,83 → 161,83 | 0.002070 | ΔRGB(-2,-9,-9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 52,113 → 53,113 | 0.002070 | ΔRGB(-2,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 115,113 → 116,113 | 0.002070 | ΔRGB(-2,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 54,114 → 55,114 | 0.002070 | ΔRGB(-2,-10,-10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 112,114 → 113,114 | 0.002070 | ΔRGB(-2,-10,-10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 56,114 → 57,114 | 0.002070 | ΔRGB(-2,-10,-10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 111,114 → 112,114 | 0.002070 | ΔRGB(-2,-10,-10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 59,115 → 60,115 | 0.002070 | ΔRGB(-2,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 108,115 → 109,115 | 0.002070 | ΔRGB(-2,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 63,2 → 64,2 | 0.001553 | ΔRGB(-3,-14,-14) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 104,2 → 105,2 | 0.001553 | ΔRGB(-3,-14,-14) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 56,3 → 57,3 | 0.001553 | ΔRGB(-2,-10,-10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 111,3 → 111,3 | 0.001553 | ΔRGB(-2,-10,-10) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 49,5 → 49,5 | 0.001553 | ΔRGB(-3,-14,-14) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 118,5 → 119,5 | 0.001553 | ΔRGB(-3,-14,-14) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 46,6 → 46,6 | 0.001553 | ΔRGB(-3,-14,-14) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 121,6 → 122,6 | 0.001553 | ΔRGB(-3,-14,-14) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 8,33 → 8,33 | 0.001553 | ΔRGB(-3,-15,-15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 159,33 → 160,33 | 0.001553 | ΔRGB(-3,-15,-15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 7,34 → 8,34 | 0.001553 | ΔRGB(-3,-15,-15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 160,34 → 160,34 | 0.001553 | ΔRGB(-3,-15,-15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,43 → 3,44 | 0.001553 | ΔRGB(-3,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 165,43 → 165,44 | 0.001553 | ΔRGB(-3,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,73 → 3,74 | 0.001553 | ΔRGB(-3,-18,-18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 165,73 → 165,74 | 0.001553 | ΔRGB(-3,-18,-18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,74 → 3,75 | 0.001553 | ΔRGB(-2,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 165,74 → 165,75 | 0.001553 | ΔRGB(-2,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 46,111 → 47,111 | 0.001553 | ΔRGB(-2,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 121,111 → 122,111 | 0.001553 | ΔRGB(-2,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 49,112 → 50,112 | 0.001553 | ΔRGB(-2,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 118,112 → 119,112 | 0.001553 | ΔRGB(-2,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 51,113 → 52,113 | 0.001553 | ΔRGB(-4,-18,-18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 116,113 → 116,113 | 0.001553 | ΔRGB(-4,-18,-18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 53,114 → 54,114 | 0.001553 | ΔRGB(-4,-17,-17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 114,114 → 114,114 | 0.001553 | ΔRGB(-4,-17,-17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 58,115 → 58,115 | 0.001553 | ΔRGB(-3,-17,-17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 109,115 → 110,115 | 0.001553 | ΔRGB(-3,-17,-17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 62,116 → 62,116 | 0.001553 | ΔRGB(-2,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 105,116 → 106,116 | 0.001553 | ΔRGB(-2,-12,-12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 64,1 → 65,1 | 0.001035 | ΔRGB(-2,-9,-9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 103,1 → 103,1 | 0.001035 | ΔRGB(-2,-9,-9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 61,2 → 61,2 | 0.001035 | ΔRGB(-2,-9,-9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 62,2 → 62,2 | 0.001035 | ΔRGB(-3,-17,-17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 106,2 → 106,2 | 0.001035 | ΔRGB(-3,-17,-17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 107,2 → 107,2 | 0.001035 | ΔRGB(-2,-9,-9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 59,2 → 60,2 | 0.001035 | ΔRGB(-1,-5,-5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 108,2 → 108,2 | 0.001035 | ΔRGB(-1,-5,-5) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 clip path url inline svg circle</title>
6<style>
7 @page { size: 200px 144px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 svg.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
12 .box { width: 200px; height: 140px; background: #d32f2f; clip-path: url(#r2clip); }
13</style>
14</head>
15<body>
16 <svg class="defs" width="0" height="0" aria-hidden="true" focusable="false"><defs><clipPath id="r2clip" clipPathUnits="objectBoundingBox"><circle cx="0.5" cy="0.5" r="0.42"/></clipPath></defs></svg>
17 <div class="box"></div>
18</body>
19</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 27 | 30 | 0,0 → 145,88 | 2 | total 0.02% · largest 0.001596% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 8,3 → 8,3 | 0.001596 | ΔRGB(15,9,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 8,85 → 8,85 | 0.001596 | ΔRGB(15,10,14) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 9,86 → 9,86 | 0.001596 | ΔRGB(18,11,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 16,0 → 16,0 | 0.000798 | ΔRGB(8,5,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 130,0 → 130,0 | 0.000798 | ΔRGB(15,10,14) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 132,1 → 132,1 | 0.000798 | ΔRGB(15,9,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 9,2 → 9,2 | 0.000798 | ΔRGB(13,8,13) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 9,3 → 9,3 | 0.000798 | ΔRGB(18,11,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 8,3 → 8,3 | 0.000798 | ΔRGB(12,8,11) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 4,7 → 4,7 | 0.000798 | ΔRGB(9,6,9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,8 → 3,8 | 0.000798 | ΔRGB(17,11,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,9 → 3,9 | 0.000798 | ΔRGB(12,7,12) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 2,9 → 2,9 | 0.000798 | ΔRGB(15,9,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 144,12 → 144,12 | 0.000798 | ΔRGB(18,11,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 145,15 → 145,15 | 0.000798 | ΔRGB(19,12,19) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 0,16 → 0,16 | 0.000798 | ΔRGB(12,8,11) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 0,72 → 0,72 | 0.000798 | ΔRGB(13,8,13) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 145,73 → 145,73 | 0.000798 | ΔRGB(18,11,18) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 144,76 → 144,76 | 0.000798 | ΔRGB(19,12,19) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 2,79 → 2,79 | 0.000798 | ΔRGB(10,6,11) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,79 → 3,79 | 0.000798 | ΔRGB(18,11,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 3,80 → 3,80 | 0.000798 | ΔRGB(19,12,19) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 4,82 → 4,82 | 0.000798 | ΔRGB(4,3,4) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 8,85 → 8,85 | 0.000798 | ΔRGB(8,5,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 132,87 → 132,87 | 0.000798 | ΔRGB(8,5,8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 16,88 → 16,88 | 0.000798 | ΔRGB(15,9,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 130,88 → 130,88 | 0.000798 | ΔRGB(4,3,4) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 clip path xywh rounded rect</title>
6<style>
7 @page { size: 224px 144px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 220px; height: 140px; background: #2e7d32; clip-path: xywh(35px 22px 145px 88px round 18px); }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 6 | 6 | 54,1 → 85,73 | 1 | total 0.005328% · largest 0.000888% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 85,1 → 85,1 | 0.000888 | ΔRGB(1,7,7) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 82,3 → 82,3 | 0.000888 | ΔRGB(2,14,14) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 59,27 → 59,27 | 0.000888 | ΔRGB(2,17,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 54,43 → 54,43 | 0.000888 | ΔRGB(2,16,16) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 54,57 → 54,57 | 0.000888 | ΔRGB(2,16,16) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 59,73 → 59,73 | 0.000888 | ΔRGB(2,17,17) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 overflow plus clip path intersection</title>
6<style>
7 @page { size: 184px 136px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .parent { position: relative; width: 125px; height: 92px; margin: 18px; overflow: hidden; background: #eeeeee; }
12 .child { position: absolute; left: 52px; top: -6px; width: 112px; height: 112px; background: #d32f2f; clip-path: circle(54px at 56px 56px); }
13</style>
14</head>
15<body>
16 <div class="parent"><div class="child"></div></div>
17</body>
18</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| Missing | 1 | 376 | 0,0 → 40,80 | 376 | total 1.2% · largest 1.2% |
| ColorErr | 1 | 251 | 40,0 → 40,80 | 251 | total 0.8% · largest 0.8% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| Missing | 0,0 → 40,80 | 1.2 | candidate lacks paint present in reference (1.2%) | |
| AntialiasCoverage | 40,0 → 40,80 | 0.8 | ΔRGB(1,1,1) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 mask shorthand position size repeat alpha</title>
6<style>
7 @page { size: 224px 136px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 220px; height: 130px; background: #1565c0; mask: linear-gradient(to right, #000 0 50%, transparent 50% 100%) 20px 10px / 80px 80px no-repeat alpha; }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 7 | 631 | 0,0 → 200,140 | 625 | total 0.2% · largest 0.2% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 0,140 → 200,140 | 0.2 | ΔRGB(28,135,135) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 28,0 → 28,0 | 0.000365 | ΔRGB(-10,-47,-47) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 172,0 → 172,0 | 0.000365 | ΔRGB(-10,-47,-47) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 28,28 → 28,28 | 0.000365 | ΔRGB(-3,-16,-16) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 172,28 → 172,28 | 0.000365 | ΔRGB(-6,-30,-30) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 28,112 → 28,112 | 0.000365 | ΔRGB(-3,-16,-16) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 172,112 → 172,112 | 0.000365 | ΔRGB(-6,-30,-30) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 mask border gradient ring</title>
6<style>
7 @page { size: 200px 140px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 200px; height: 140px; background: #d32f2f; mask-border-source: linear-gradient(#000, #000); mask-border-slice: 28; mask-border-width: 28px; mask-border-repeat: stretch; }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 1 | 176 | 96,0 → 96,56 | 176 | total 0.3% · largest 0.3% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 96,0 → 96,56 | 0.3 | ΔRGB(-38,-181,-181) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 mask clip content box</title>
6<style>
7 @page { size: 184px 144px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 180px; height: 140px; border: 18px solid #263238; padding: 24px; background: #d32f2f; mask-image: linear-gradient(#000, #000); mask-clip: content-box; -webkit-mask-image: linear-gradient(#000, #000); -webkit-mask-clip: content-box; }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 9 | 9 | 56,31 → 142,110 | 1 | total 0.003288% · largest 0.000365% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 78,31 → 78,31 | 0.000365 | ΔRGB(1,1,1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 122,31 → 122,31 | 0.000365 | ΔRGB(1,1,1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 56,63 → 56,63 | 0.000365 | ΔRGB(1,1,1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 58,82 → 58,82 | 0.000365 | ΔRGB(0,1,1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 142,82 → 142,82 | 0.000365 | ΔRGB(0,1,1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 74,105 → 74,105 | 0.000365 | ΔRGB(1,0,1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 126,105 → 126,105 | 0.000365 | ΔRGB(1,0,1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 82,110 → 82,110 | 0.000365 | ΔRGB(0,1,1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 118,110 → 118,110 | 0.000365 | ΔRGB(0,1,1) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>mask composite exclude layers</title>
6<style>
7 @page { size: 200px 144px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box {
12 width: 200px;
13 height: 140px;
14 background: #2e7d32;
15 mask-image:
16 linear-gradient(#000000, #000000),
17 radial-gradient(circle 44px at 50% 50%, #000000 0 44px, transparent 45px);
18 mask-size: 100% 100%, 100% 100%;
19 mask-repeat: no-repeat, no-repeat;
20 mask-composite: exclude;
21 -webkit-mask-image:
22 radial-gradient(circle 44px at 50% 50%, #000000 0 44px, transparent 45px),
23 linear-gradient(#000000, #000000);
24 -webkit-mask-size: 100% 100%, 100% 100%;
25 -webkit-mask-repeat: no-repeat, no-repeat;
26 -webkit-mask-composite: source-out;
27 }
28</style>
29</head>
30<body>
31 <div class="box"></div>
32</body>
33</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 9 | 9 | 6,0 → 61,120 | 1 | total 0.01% · largest 0.001374% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 6,0 → 6,0 | 0.001374 | ΔRGB(0,0,1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 15,2 → 15,2 | 0.001374 | ΔRGB(0,0,1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 43,17 → 43,17 | 0.001374 | ΔRGB(0,0,1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 44,18 → 44,18 | 0.001374 | ΔRGB(0,0,1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 59,46 → 59,46 | 0.001374 | ΔRGB(0,0,1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 61,55 → 61,55 | 0.001374 | ΔRGB(0,0,1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 57,84 → 57,84 | 0.001374 | ΔRGB(0,0,1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 38,108 → 38,108 | 0.001374 | ΔRGB(0,0,1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 14,120 → 14,120 | 0.001374 | ΔRGB(0,0,1) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 mask composite intersect</title>
6<style>
7 @page { size: 200px 144px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 200px; height: 140px; background: #1565c0; mask-image: radial-gradient(circle 60px at 90px 70px, #000 0 60px, transparent 61px), linear-gradient(to right, transparent 0 45%, #000 45% 100%); mask-size: 100% 100%, 100% 100%; mask-repeat: no-repeat, no-repeat; mask-composite: intersect; -webkit-mask-image: linear-gradient(to right, transparent 0 45%, #000 45% 100%), radial-gradient(circle 60px at 90px 70px, #000 0 60px, transparent 61px); -webkit-mask-size: 100% 100%, 100% 100%; -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: source-in; }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| Extra | 1 | 312 | 0,0 → 100,0 | 312 | total 0.2% · largest 0.2% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| Extra | 0,0 → 100,0 | 0.2 | candidate adds paint absent from reference (0.2%) |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>mask-image conic-gradient</title>
6<style>
7 @page { size: 384px 200px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box {
12 width: 200px;
13 height: 200px;
14 background-color: #ef6c00;
15 /* Conic alpha sweep: opaque wedge growing clockwise from the top
16 (css-masking-1 §3.1, conic CSS gradient as a mask source; alpha mode). */
17 -webkit-mask-image: conic-gradient(from 0deg at 50% 50%, #000 0%, #000 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);
18 mask-image: conic-gradient(from 0deg at 50% 50%, #000 0%, #000 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);
19 }
20</style>
21</head>
22<body>
23 <div class="box"></div>
24</body>
25</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 1 | 1 | 220,0 → 220,0 | 1 | total 0.000211% · largest 0.000211% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 220,0 → 220,0 | 0.000211 | ΔRGB(-17,-26,-11) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>mask-image diagonal linear-gradient</title>
6<style>
7 @page { size: 304px 224px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box {
12 width: 220px;
13 height: 220px;
14 background-color: #6a1b9a;
15 /* Diagonal alpha fade: opaque at top-left, transparent at bottom-right
16 (css-masking-1 §3.4: match-source on a CSS gradient = alpha mode). */
17 -webkit-mask-image: linear-gradient(135deg, #000 0%, rgba(0,0,0,0) 100%);
18 mask-image: linear-gradient(135deg, #000 0%, rgba(0,0,0,0) 100%);
19 }
20</style>
21</head>
22<body>
23 <div class="box"></div>
24</body>
25</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| Extra | 6 | 625 | 0,0 → 200,157 | 133 | total 0.2% · largest 0.03% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| Extra | 0,0 → 0,42 | 0.03 | candidate adds paint absent from reference (0.03%) | |
| Extra | 158,0 → 200,0 | 0.03 | candidate adds paint absent from reference (0.03%) | |
| Extra | 43,0 → 73,0 | 0.02 | candidate adds paint absent from reference (0.02%) | |
| Extra | 0,127 → 0,157 | 0.02 | candidate adds paint absent from reference (0.02%) | |
| Extra | 100,0 → 127,0 | 0.02 | candidate adds paint absent from reference (0.02%) | |
| Extra | 0,73 → 0,100 | 0.02 | candidate adds paint absent from reference (0.02%) |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 mask image repeating conic spokes</title>
6<style>
7 @page { size: 200px 200px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 200px; height: 200px; background: #6a1b9a; mask-image: repeating-conic-gradient(#000 0deg 15deg, transparent 15deg 30deg); -webkit-mask-image: repeating-conic-gradient(#000 0deg 15deg, transparent 15deg 30deg); }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| Extra | 1 | 500 | 0,0 → 0,160 | 500 | total 0.1% · largest 0.1% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| Extra | 0,0 → 0,160 | 0.1 | candidate adds paint absent from reference (0.1%) |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>mask-image repeating-linear-gradient</title>
6<style>
7 @page { size: 296px 160px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box {
12 width: 240px;
13 height: 160px;
14 background-color: #00695c;
15 /* Striped alpha mask: opaque bands alternating with transparent bands
16 (css-masking-1 §3.1, repeating CSS gradient image as a mask source). */
17 -webkit-mask-image: repeating-linear-gradient(to right, #000 0%, #000 10%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 20%);
18 mask-image: repeating-linear-gradient(to right, #000 0%, #000 10%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 20%);
19 }
20</style>
21</head>
22<body>
23 <div class="box"></div>
24</body>
25</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 2 | 905 | 0,0 → 90,100 | 593 | total 1.0% · largest 0.7% |
| Extra | 1 | 1 | 90,100 → 90,100 | 1 | total 0.001133% · largest 0.001133% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 0,0 → 90,100 | 0.7 | ΔRGB(-51,-32,-50) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 90,0 → 90,100 | 0.4 | ΔRGB(-60,-37,-60) | antialiasing coverage residue on a shared outline |
| Extra | 90,100 → 90,100 | 0.001133 | candidate adds paint absent from reference (0.001133%) |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 mask inline svg default luminance</title>
6<style>
7 @page { size: 184px 104px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 svg.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
12 .box { width: 180px; height: 100px; background: #2e7d32; mask-image: url(#r2lummask); -webkit-mask-image: url(#r2lummask); }
13</style>
14</head>
15<body>
16 <svg class="defs" width="0" height="0" aria-hidden="true" focusable="false"><defs><mask id="r2lummask" maskUnits="userSpaceOnUse" x="0" y="0" width="180" height="100"><rect width="90" height="100" fill="#000000"/><rect x="90" width="90" height="100" fill="#ffffff"/></mask></defs></svg>
17 <div class="box"></div>
18</body>
19</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 3 | 1061 | 0,0 → 180,100 | 531 | total 0.6% · largest 0.3% |
| Missing | 1 | 313 | 110,0 → 110,100 | 313 | total 0.2% · largest 0.2% |
| Extra | 1 | 1 | 180,100 → 180,100 | 1 | total 0.000567% · largest 0.000567% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 0,0 → 70,100 | 0.3 | ΔRGB(-72,-45,-71) | antialiasing coverage residue on a shared outline |
| Missing | 110,0 → 110,100 | 0.2 | candidate lacks paint present in reference (0.2%) | |
| AntialiasCoverage | 180,0 → 180,100 | 0.2 | ΔRGB(-47,-29,-47) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 110,100 → 180,100 | 0.1 | ΔRGB(-47,-29,-47) | antialiasing coverage residue on a shared outline |
| Extra | 180,100 → 180,100 | 0.000567 | candidate adds paint absent from reference (0.000567%) |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 mask inline svg alpha type</title>
6<style>
7 @page { size: 184px 104px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 svg.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
12 .box { width: 180px; height: 100px; background: #2e7d32; mask-image: url(#r2alphamask); -webkit-mask-image: url(#r2alphamask); }
13</style>
14</head>
15<body>
16 <svg class="defs" width="0" height="0" aria-hidden="true" focusable="false"><defs><mask id="r2alphamask" maskUnits="userSpaceOnUse" x="0" y="0" width="180" height="100" mask-type="alpha"><rect width="70" height="100" fill="#000000"/><rect x="70" width="40" height="100" fill="transparent"/><rect x="110" width="70" height="100" fill="#000000"/></mask></defs></svg>
17 <div class="box"></div>
18</body>
19</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| Extra | 266 | 443 | 1,0 → 159,67 | 27 | total 0.2% · largest 0.01% |
| ColorErr | 177 | 2165 | 0,0 → 160,160 | 1210 | total 0.9% · largest 0.5% |
| Missing | 57 | 67 | 0,75 → 160,160 | 3 | total 0.03% · largest 0.001193% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 3,100 → 157,160 | 0.5 | ΔRGB(7,20,15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 75,0 → 85,0 | 0.01 | ΔRGB(-49,-141,-100) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 21,21 → 26,26 | 0.01 | ΔRGB(-15,-44,-31) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 134,21 → 139,26 | 0.01 | ΔRGB(-15,-44,-31) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 0,76 → 0,84 | 0.01 | ΔRGB(0,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 160,76 → 160,84 | 0.01 | ΔRGB(0,-1,0) | antialiasing coverage residue on a shared outline |
| Extra | 76,0 → 84,0 | 0.01 | candidate adds paint absent from reference (0.01%) | |
| AntialiasCoverage | 42,8 → 47,10 | 0.009145 | ΔRGB(-35,-101,-72) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 113,8 → 118,10 | 0.009145 | ΔRGB(-35,-101,-72) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 7,42 → 10,47 | 0.009145 | ΔRGB(-19,-55,-39) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 150,42 → 153,47 | 0.009145 | ΔRGB(-19,-54,-38) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 2,95 → 2,100 | 0.006759 | ΔRGB(6,19,14) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 158,95 → 158,100 | 0.006759 | ΔRGB(6,19,14) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,92 → 1,95 | 0.005567 | ΔRGB(8,24,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 159,92 → 159,95 | 0.005567 | ΔRGB(8,24,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 71,1 → 75,1 | 0.004374 | ΔRGB(-25,-73,-52) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 85,1 → 89,1 | 0.004374 | ΔRGB(-25,-73,-52) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 0,72 → 0,75 | 0.004374 | ΔRGB(2,6,4) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 160,72 → 160,75 | 0.004374 | ΔRGB(2,6,4) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 0,85 → 0,89 | 0.004374 | ΔRGB(8,24,17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 160,85 → 160,89 | 0.004374 | ΔRGB(8,24,17) | antialiasing coverage residue on a shared outline |
| Extra | 72,0 → 75,0 | 0.003976 | candidate adds paint absent from reference (0.003976%) | |
| Extra | 85,0 → 88,0 | 0.003976 | candidate adds paint absent from reference (0.003976%) | |
| AntialiasCoverage | 69,1 → 71,1 | 0.003181 | ΔRGB(-26,-74,-53) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 89,1 → 91,1 | 0.003181 | ΔRGB(-26,-74,-53) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 27,19 → 28,20 | 0.003181 | ΔRGB(-4,-13,-9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 132,19 → 133,20 | 0.003181 | ΔRGB(-4,-13,-9) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 19,28 → 20,29 | 0.003181 | ΔRGB(-4,-11,-8) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 159,69 → 159,71 | 0.003181 | ΔRGB(2,7,5) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,89 → 1,91 | 0.003181 | ΔRGB(11,34,24) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 159,89 → 159,91 | 0.003181 | ΔRGB(11,34,24) | antialiasing coverage residue on a shared outline |
| Extra | 69,1 → 71,1 | 0.002783 | candidate adds paint absent from reference (0.002783%) | |
| Extra | 89,1 → 91,1 | 0.002783 | candidate adds paint absent from reference (0.002783%) | |
| AntialiasCoverage | 140,28 → 141,28 | 0.002783 | ΔRGB(-29,-82,-58) | antialiasing coverage residue on a shared outline |
| Extra | 67,1 → 68,1 | 0.002386 | candidate adds paint absent from reference (0.002386%) | |
| Extra | 92,1 → 93,1 | 0.002386 | candidate adds paint absent from reference (0.002386%) | |
| AntialiasCoverage | 67,1 → 68,1 | 0.002386 | ΔRGB(-25,-72,-51) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 92,1 → 93,1 | 0.002386 | ΔRGB(-25,-72,-51) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 65,2 → 67,2 | 0.002386 | ΔRGB(-25,-71,-51) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 93,2 → 95,2 | 0.002386 | ΔRGB(-25,-71,-51) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 52,5 → 54,5 | 0.002386 | ΔRGB(-18,-51,-37) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 106,5 → 108,5 | 0.002386 | ΔRGB(-18,-51,-37) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 50,6 → 51,6 | 0.002386 | ΔRGB(-24,-69,-49) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 109,6 → 110,6 | 0.002386 | ΔRGB(-24,-69,-49) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 48,6 → 50,7 | 0.002386 | ΔRGB(-37,-105,-75) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 110,6 → 112,7 | 0.002386 | ΔRGB(-36,-103,-73) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 33,15 → 34,15 | 0.002386 | ΔRGB(-21,-61,-43) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 126,15 → 127,15 | 0.002386 | ΔRGB(-21,-61,-43) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 31,17 → 32,17 | 0.002386 | ΔRGB(-10,-29,-21) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 128,17 → 129,17 | 0.002386 | ΔRGB(-10,-29,-21) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 29,18 → 30,18 | 0.002386 | ΔRGB(-15,-43,-31) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 130,18 → 131,18 | 0.002386 | ΔRGB(-15,-43,-31) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 17,30 → 18,31 | 0.002386 | ΔRGB(-12,-36,-25) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 142,30 → 143,31 | 0.002386 | ΔRGB(-12,-36,-25) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 16,31 → 17,32 | 0.002386 | ΔRGB(-8,-23,-17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 143,31 → 144,32 | 0.002386 | ΔRGB(-8,-23,-17) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 14,34 → 15,35 | 0.002386 | ΔRGB(-17,-50,-35) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 145,34 → 146,35 | 0.002386 | ΔRGB(-17,-50,-35) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 6,49 → 6,50 | 0.002386 | ΔRGB(-18,-52,-37) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 154,49 → 154,50 | 0.002386 | ΔRGB(-16,-47,-33) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 5,50 → 6,52 | 0.002386 | ΔRGB(-12,-36,-26) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 154,50 → 155,52 | 0.002386 | ΔRGB(-12,-36,-26) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 4,53 → 5,54 | 0.002386 | ΔRGB(-7,-21,-15) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 155,53 → 156,54 | 0.002386 | ΔRGB(-7,-21,-15) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>mask-image url svg</title>
6<style>
7 @page { size: 280px 200px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box {
12 width: 200px;
13 height: 200px;
14 background-color: #ad1457;
15 /* Mask via a data:-URI SVG whose white circle defines the visible disc. */
16 -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjgwIiBmaWxsPSIjZmZmIi8+PC9zdmc+");
17 -webkit-mask-repeat: no-repeat;
18 mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjgwIiBmaWxsPSIjZmZmIi8+PC9zdmc+");
19 mask-repeat: no-repeat;
20 }
21</style>
22</head>
23<body>
24 <div class="box"></div>
25</body>
26</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 3 | 1312 | 0,0 → 180,100 | 500 | total 0.7% · largest 0.3% |
| Missing | 1 | 312 | 120,0 → 120,100 | 312 | total 0.2% · largest 0.2% |
| Extra | 1 | 1 | 180,100 → 180,100 | 1 | total 0.000567% · largest 0.000567% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 0,0 → 60,100 | 0.3 | ΔRGB(-84,-52,-82) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 120,0 → 180,100 | 0.3 | ΔRGB(51,32,50) | antialiasing coverage residue on a shared outline |
| Missing | 120,0 → 120,100 | 0.2 | candidate lacks paint present in reference (0.2%) | |
| AntialiasCoverage | 180,0 → 180,100 | 0.2 | ΔRGB(-47,-29,-47) | antialiasing coverage residue on a shared outline |
| Extra | 180,100 → 180,100 | 0.000567 | candidate adds paint absent from reference (0.000567%) |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 mask svg image match source luminance</title>
6<style>
7 @page { size: 184px 104px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 180px; height: 100px; background: #2e7d32; mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22180%22%20height=%22100%22%3E%3Crect%20width=%2260%22%20height=%22100%22%20fill=%22red%22/%3E%3Crect%20x=%2260%22%20width=%2260%22%20height=%22100%22%20fill=%22transparent%22/%3E%3Crect%20x=%22120%22%20width=%2260%22%20height=%22100%22%20fill=%22white%22/%3E%3C/svg%3E"); mask-mode: match-source; mask-size: 180px 100px; mask-repeat: no-repeat; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22180%22%20height=%22100%22%3E%3Crect%20width=%2260%22%20height=%22100%22%20fill=%22red%22/%3E%3Crect%20x=%2260%22%20width=%2260%22%20height=%22100%22%20fill=%22transparent%22/%3E%3Crect%20x=%22120%22%20width=%2260%22%20height=%22100%22%20fill=%22white%22/%3E%3C/svg%3E"); -webkit-mask-size: 180px 100px; -webkit-mask-repeat: no-repeat; }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 3 | 1312 | 0,0 → 180,100 | 500 | total 0.7% · largest 0.3% |
| Missing | 1 | 312 | 120,0 → 120,100 | 312 | total 0.2% · largest 0.2% |
| Extra | 1 | 1 | 180,100 → 180,100 | 1 | total 0.000567% · largest 0.000567% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 0,0 → 60,100 | 0.3 | ΔRGB(-84,-52,-82) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 120,0 → 180,100 | 0.3 | ΔRGB(51,32,50) | antialiasing coverage residue on a shared outline |
| Missing | 120,0 → 120,100 | 0.2 | candidate lacks paint present in reference (0.2%) | |
| AntialiasCoverage | 180,0 → 180,100 | 0.2 | ΔRGB(-47,-29,-47) | antialiasing coverage residue on a shared outline |
| Extra | 180,100 → 180,100 | 0.000567 | candidate adds paint absent from reference (0.000567%) |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 mask svg image alpha mode</title>
6<style>
7 @page { size: 184px 104px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 180px; height: 100px; background: #2e7d32; mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22180%22%20height=%22100%22%3E%3Crect%20width=%2260%22%20height=%22100%22%20fill=%22red%22/%3E%3Crect%20x=%2260%22%20width=%2260%22%20height=%22100%22%20fill=%22transparent%22/%3E%3Crect%20x=%22120%22%20width=%2260%22%20height=%22100%22%20fill=%22white%22/%3E%3C/svg%3E"); mask-mode: alpha; mask-size: 180px 100px; mask-repeat: no-repeat; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22180%22%20height=%22100%22%3E%3Crect%20width=%2260%22%20height=%22100%22%20fill=%22red%22/%3E%3Crect%20x=%2260%22%20width=%2260%22%20height=%22100%22%20fill=%22transparent%22/%3E%3Crect%20x=%22120%22%20width=%2260%22%20height=%22100%22%20fill=%22white%22/%3E%3C/svg%3E"); -webkit-mask-mode: alpha; -webkit-mask-size: 180px 100px; -webkit-mask-repeat: no-repeat; }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| ColorErr | 55458 | 94310 | 1,0 → 220,160 | 500 | total 27.5% · largest 0.1% · max ΔE 0.8 |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| AntialiasCoverage | 118,0 → 118,160 | 0.1 | ΔE 0.3 ΔRGB(-1,-1,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 197,0 → 197,160 | 0.1 | ΔE 0.5 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 41,0 → 41,2 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 120,0 → 120,2 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,1 → 1,3 | 0.002038 | ΔE 0.3 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 81,1 → 81,3 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,1 → 157,3 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 41,3 → 41,4 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 120,3 → 120,4 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,4 → 1,6 | 0.002038 | ΔE 0.3 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 81,4 → 81,6 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,4 → 157,6 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 41,5 → 41,7 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 120,5 → 120,7 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,6 → 1,8 | 0.002038 | ΔE 0.3 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 81,6 → 81,8 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,6 → 157,8 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 41,8 → 41,10 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 120,8 → 120,10 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,9 → 1,11 | 0.002038 | ΔE 0.3 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 81,9 → 81,11 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,9 → 157,11 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 41,10 → 41,12 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 120,10 → 120,12 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,12 → 1,13 | 0.002038 | ΔE 0.3 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 81,12 → 81,13 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,12 → 157,13 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 41,13 → 41,15 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 120,13 → 120,15 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,14 → 1,16 | 0.002038 | ΔE 0.3 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 81,14 → 81,16 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,14 → 157,16 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 41,15 → 41,17 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 120,15 → 120,17 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,17 → 1,19 | 0.002038 | ΔE 0.3 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 81,17 → 81,19 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,17 → 157,19 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 41,18 → 41,20 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 120,18 → 120,20 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,19 → 1,21 | 0.002038 | ΔE 0.3 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 81,19 → 81,21 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,19 → 157,21 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 41,20 → 41,22 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 120,20 → 120,22 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,22 → 1,24 | 0.002038 | ΔE 0.3 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 81,22 → 81,24 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,22 → 157,24 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 41,23 → 41,25 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 120,23 → 120,25 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,24 → 1,26 | 0.002038 | ΔE 0.3 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 81,24 → 81,26 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,24 → 157,26 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 41,26 → 41,28 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 120,26 → 120,28 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,27 → 1,29 | 0.002038 | ΔE 0.3 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 81,27 → 81,29 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,27 → 157,29 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 41,28 → 41,30 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 120,28 → 120,30 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 1,29 → 1,31 | 0.002038 | ΔE 0.3 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 81,29 → 81,31 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 157,29 → 157,31 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,0) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 41,31 → 41,33 | 0.002038 | ΔE 0.4 ΔRGB(-1,-1,-1) | antialiasing coverage residue on a shared outline |
| AntialiasCoverage | 120,31 → 120,33 | 0.002038 | ΔE 0.4 ΔRGB(-1,0,-1) | antialiasing coverage residue on a shared outline |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>mask-mode luminance</title>
6<style>
7 @page { size: 288px 160px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box {
12 width: 220px;
13 height: 160px;
14 background-color: #283593;
15 /* Luminance mask (css-masking-1 §3.4): the gradient is fully opaque but
16 its luminance ramps white -> black, so coverage fades left (visible) to
17 right (masked out). White = full coverage, black = none. */
18 -webkit-mask-image: linear-gradient(to right, #fff 0%, #000 100%);
19 -webkit-mask-mode: luminance;
20 mask-image: linear-gradient(to right, #fff 0%, #000 100%);
21 mask-mode: luminance;
22 }
23</style>
24</head>
25<body>
26 <div class="box"></div>
27</body>
28</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| Extra | 1 | 375 | 210,0 → 210,120 | 375 | total 0.2% · largest 0.2% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| Extra | 210,0 → 210,120 | 0.2 | candidate adds paint absent from reference (0.2%) |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 mask mode match source gradient alpha</title>
6<style>
7 @page { size: 216px 120px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 210px; height: 120px; background: #d32f2f; mask-image: linear-gradient(to right, #000 0 33%, transparent 33% 66%, #fff 66% 100%); mask-mode: match-source; -webkit-mask-image: linear-gradient(to right, #000 0 33%, transparent 33% 66%, #fff 66% 100%); -webkit-mask-mode: alpha; }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| Missing | 6 | 2250 | 20,0 → 220,120 | 375 | total 0.9% · largest 0.1% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| Missing | 20,0 → 20,120 | 0.1 | candidate lacks paint present in reference (0.1%) | |
| Missing | 60,0 → 60,120 | 0.1 | candidate lacks paint present in reference (0.1%) | |
| Missing | 100,0 → 100,120 | 0.1 | candidate lacks paint present in reference (0.1%) | |
| Missing | 140,0 → 140,120 | 0.1 | candidate lacks paint present in reference (0.1%) | |
| Missing | 180,0 → 180,120 | 0.1 | candidate lacks paint present in reference (0.1%) | |
| Missing | 220,0 → 220,120 | 0.1 | candidate lacks paint present in reference (0.1%) |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 mask repeat tiled stripes</title>
6<style>
7 @page { size: 224px 120px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 220px; height: 120px; background: #6a1b9a; mask-image: linear-gradient(to right, #000 0 20px, transparent 20px 40px); mask-size: 40px 120px; mask-repeat: repeat; -webkit-mask-image: linear-gradient(to right, #000 0 20px, transparent 20px 40px); -webkit-mask-size: 40px 120px; -webkit-mask-repeat: repeat; }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>
| class | regions | pixels | union bbox (CSS px) | largest px | maximum magnitude |
|---|---|---|---|---|---|
| Missing | 1 | 375 | 30,0 → 30,120 | 375 | total 1.1% · largest 1.1% |
| class | bbox (CSS px) | area% | magnitude | reason |
|---|---|---|---|---|
| Missing | 30,0 → 30,120 | 1.1 | candidate lacks paint present in reference (1.1%) |
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>r2 mask size independent layer</title>
6<style>
7 @page { size: 224px 120px; margin: 0; }
8 html { font-family: ParitySans; line-height: 1.5; }
9 * { margin: 0; box-sizing: border-box; }
10 html, body { background: #ffffff; }
11 .box { width: 220px; height: 120px; background: #d32f2f; mask-image: linear-gradient(to right, #000 0 50%, transparent 50% 100%); mask-size: 60px 120px; mask-repeat: no-repeat; -webkit-mask-image: linear-gradient(to right, #000 0 50%, transparent 50% 100%); -webkit-mask-size: 60px 120px; -webkit-mask-repeat: no-repeat; }
12</style>
13</head>
14<body>
15 <div class="box"></div>
16</body>
17</html>