Skip to content

fix(cli): stop isTransparentColor misreading opaque zero-blue colors as transparent #3902

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
miga-heygen wants to merge 1 commit into
base: main
Choose a base branch
from
+19 −9
Open

fix(cli): stop isTransparentColor misreading opaque zero-blue colors as transparent #3902

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 5 additions & 9 deletions packages/cli/src/commands/layout-audit.browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,12 +324,7 @@
}

function hasPaint(style) {
const backgroundColor = style.backgroundColor || "";
const hasBackground =
backgroundColor !== "" &&
backgroundColor !== "transparent" &&
!backgroundColor.endsWith(", 0)") &&
backgroundColor !== "rgba(0, 0, 0, 0)";
const hasBackground = !isTransparentColor(style.backgroundColor);
const hasImage = style.backgroundImage && style.backgroundImage !== "none";
const hasBorder =
parsePx(style.borderTopWidth) +
Expand Down Expand Up @@ -591,10 +586,11 @@
return element.hasAttribute("data-layout-allow-overlap");
}

// Alpha must come from colorAlpha's argument-position parse, never from a
// `", 0)"` string suffix: that suffix also matches fully-opaque 3-value rgb()
// colours whose blue channel is zero, e.g. pure red/green/yellow.
function isTransparentColor(color) {
return (
!color || color === "transparent" || color === "rgba(0, 0, 0, 0)" || color.endsWith(", 0)")
);
return !color || color === "transparent" || colorAlpha(color) === 0;
}

function alphaFromParts(parts, index) {
Expand Down
14 changes: 14 additions & 0 deletions packages/cli/src/commands/layout-audit.browser.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2511,6 +2511,20 @@ describe("layout-audit.browser occlusion", () => {
expect(occluded?.coveredFraction).toBe(1);
});

// PRINFRA-702: `rgb(r, g, 0)` ends in the same `", 0)"` as a transparent
// `rgba(..., 0)`, so a string-suffix transparency check silently exempted
// opaque red/green/yellow occluders from occlusion entirely.
it.each(["rgb(0, 255, 0)", "rgb(255, 0, 0)", "rgb(255, 255, 0)"])(
"flags an opaque %s occluder whose blue channel is zero",
(backgroundColor) => {
const issues = auditOcclusionScene({
overlayStyle: { backgroundColor },
topmostId: "overlay",
});
expect(issues.some((issue) => issue.code === "text_occluded")).toBe(true);
},
);

// #U10: a 2-point hit on the 27-point probe grid (3 rows x 9 columns) is a
// sliver of edge cover — reports ~0.07 coverage either way, but only GATES
// (produces a finding) for short atomic labels; ordinary prose survives it.
Expand Down
Loading