diff --git a/packages/cli/src/commands/layout-audit.browser.js b/packages/cli/src/commands/layout-audit.browser.js index 1d57956fa1..c21fcea88b 100644 --- a/packages/cli/src/commands/layout-audit.browser.js +++ b/packages/cli/src/commands/layout-audit.browser.js @@ -105,6 +105,10 @@ return !!element.closest("[data-layout-allow-overflow]"); } + function hasTextClipOptOut(element) { + return hasAllowOverflowFlag(element) || element.hasAttribute("data-layout-bleed"); + } + function opacityChain(element) { let opacity = 1; for (let current = element; current; current = current.parentElement) { @@ -394,6 +398,7 @@ } function clippedTextIssue(element, time, tolerance) { + if (hasTextClipOptOut(element)) return null; const style = getComputedStyle(element); if (!clipsOverflow(style)) return null; const overflowX = element.scrollWidth - element.clientWidth; @@ -455,7 +460,7 @@ const containerOverflow = overflowFor(textRect, containerRect, tolerance, verticalTolerance); if ( containerOverflow && - !hasAllowOverflowFlag(element) && + !hasTextClipOptOut(element) && !clippedByAncestor(element, container) ) { const style = elementStyle; @@ -481,7 +486,7 @@ } const canvasOverflow = overflowFor(textRect, rootRect, tolerance); - if (canvasOverflow && !hasAllowOverflowFlag(element)) { + if (canvasOverflow && !hasTextClipOptOut(element)) { issues.push({ code: "canvas_overflow", severity: "info", diff --git a/packages/cli/src/commands/layout-audit.browser.test.ts b/packages/cli/src/commands/layout-audit.browser.test.ts index 1a334a5b68..5daa392dd2 100644 --- a/packages/cli/src/commands/layout-audit.browser.test.ts +++ b/packages/cli/src/commands/layout-audit.browser.test.ts @@ -141,6 +141,49 @@ describe("layout-audit.browser", () => { expect(runAudit()).toEqual([]); }); + it("suppresses intentional ellipsis clipping under overflow opt-outs", () => { + document.body.innerHTML = ` +