Skip unresolved container query CSS

Exclude linked container-query groups when their current applicability cannot be resolved, with a browser regression proving inactive styles do not leak.

AI assistance disclosure: This commit was prepared with Codex under maintainer direction.
This commit is contained in:
Paul Bakaus
2026-09-02 10:04:26 -07:00
parent 95b28ed6d7
commit eec431e778
5 changed files with 33 additions and 0 deletions
+7
View File
@@ -1321,6 +1321,13 @@ if (IS_BROWSER) {
try { return CSS.supports(condition); } try { return CSS.supports(condition); }
catch { return true; } catch { return true; }
} }
if (constructorName === 'CSSContainerRule' || /^\s*@container\b/i.test(rule?.cssText || '')) {
// The platform exposes no matchMedia-equivalent for container queries,
// and selector matches do not prove that the element's query container
// satisfies the condition. Omit the group rather than report styles that
// are inactive for the current layout.
return false;
}
return true; return true;
} }
@@ -8225,6 +8225,13 @@ if (IS_BROWSER) {
try { return CSS.supports(condition); } try { return CSS.supports(condition); }
catch { return true; } catch { return true; }
} }
if (constructorName === 'CSSContainerRule' || /^\s*@container\b/i.test(rule?.cssText || '')) {
// The platform exposes no matchMedia-equivalent for container queries,
// and selector matches do not prove that the element's query container
// satisfies the condition. Omit the group rather than report styles that
// are inactive for the current layout.
return false;
}
return true; return true;
} }
@@ -1405,6 +1405,11 @@ describe('detectUrl — browser-only fixtures', () => {
}))); })));
const linkedFindings = await linkedPage.evaluate(() => window.impeccableDetect({ serialize: true }) const linkedFindings = await linkedPage.evaluate(() => window.impeccableDetect({ serialize: true })
.flatMap(group => group.findings || [])); .flatMap(group => group.findings || []));
const inactiveContainerBackground = await linkedPage.$eval(
'.inactive-container-stripes',
element => getComputedStyle(element).backgroundImage,
);
assert.equal(inactiveContainerBackground, 'none');
const grids = linkedFindings.filter(finding => finding.type === 'codex-grid-background'); const grids = linkedFindings.filter(finding => finding.type === 'codex-grid-background');
assert.equal(grids.length, 1, JSON.stringify({ linkedFindings, linkedCssom })); assert.equal(grids.length, 1, JSON.stringify({ linkedFindings, linkedCssom }));
assert.equal(grids[0].severity, 'advisory'); assert.equal(grids[0].severity, 'advisory');
+11
View File
@@ -40,6 +40,17 @@ main > ::before {
} }
} }
.container-query-host {
container-type: inline-size;
width: 240px;
}
@container (width > 900px) {
.inactive-container-stripes {
background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fafafa 10px, #fafafa 20px);
}
}
.unused-linked-transition { .unused-linked-transition {
transition: width 200ms ease; transition: width 200ms ease;
} }
+3
View File
@@ -11,6 +11,9 @@
<div class="flag-linked-grid">Rendered decorative grid</div> <div class="flag-linked-grid">Rendered decorative grid</div>
<div class="inactive-media-stripes">Inactive media stripes</div> <div class="inactive-media-stripes">Inactive media stripes</div>
<div class="inactive-supports-stripes">Inactive supports stripes</div> <div class="inactive-supports-stripes">Inactive supports stripes</div>
<div class="container-query-host">
<div class="inactive-container-stripes">Inactive container-query stripes</div>
</div>
</main> </main>
</body> </body>
</html> </html>